evui 3.3.29 → 3.3.32

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

@@ -1,4 +1,4 @@
-import Util from '@/components/chart/helpers/helpers.util';
+import Util from '../helpers/helpers.util';
 
 const modules = {
   /**
@@ -20,10 +20,48 @@ const modules = {
       this.wrapperDOM.appendChild(this.resizeDOM);
     }
 
+    if (this.useTable) {
+      this.legendTableDOM = document.createElement('table');
+      this.legendTableDOM.className = 'ev-chart-legend--table';
+      this.setLegendColumnHeader();
+      this.legendBoxDOM.appendChild(this.legendTableDOM);
+      this.legendDOM.style.overflow = 'auto';
+    }
+
     this.legendDOM.appendChild(this.legendBoxDOM);
     this.wrapperDOM.appendChild(this.legendDOM);
   },
 
+  /**
+   * Create and append Table Header DOM
+   * Only chartOption > legend > table > use : true
+   *
+   * @returns {undefined}
+   */
+  setLegendColumnHeader() {
+    const tableOpt = this.options.legend?.table;
+    const columns = tableOpt.columns;
+    const columnKeyList = ['color', ...Object.keys(columns)];
+
+    columnKeyList.forEach((key) => {
+      const columnNameDOM = document.createElement('th');
+      columnNameDOM.className = 'ev-chart-legend--table__column-name';
+
+      if (columns[key]?.use || key === 'color' || key === 'name') {
+        const columnOpt = columns[key];
+        const keyText = columnOpt?.title ?? '';
+
+        columnNameDOM.textContent = keyText;
+        columnNameDOM.setAttribute('title', keyText);
+        columnNameDOM.dataset.type = keyText;
+
+        Util.setDOMStyle(columnNameDOM, tableOpt?.style?.header);
+
+        this.legendTableDOM.append(columnNameDOM);
+      }
+    });
+  },
+
   /**
    * Initialize legend
    * If there was no initialization, create DOM and set default layout.
@@ -33,6 +71,8 @@ const modules = {
    */
   initLegend() {
     this.isHeatMapType = this.options.type === 'heatMap';
+    this.useTable = !!this.options.legend?.table?.use && this.options.type !== 'heatmap' && this.options.type !== 'scatter';
+
     if (!this.isInitLegend) {
       this.createLegendLayout();
     }
@@ -44,6 +84,7 @@ const modules = {
       this.initEvent();
       this.addLegendList();
     }
+
     this.initResizeEvent();
 
     this.isInitLegend = true;
@@ -63,19 +104,37 @@ const modules = {
 
     groups.forEach((group) => {
       group.slice().reverse().forEach((sId) => {
-        if (seriesList[sId] && seriesList[sId].showLegend) {
-          this.addLegend(seriesList[sId]);
+        const series = seriesList[sId];
+
+        if (series && series.showLegend) {
+          if (this.useTable) {
+            this.addLegendWithValues(series);
+          } else {
+            this.addLegend(series);
+          }
         }
       });
     });
 
     Object.values(seriesList).forEach((series) => {
-      if (!series.isExistGrp && series.showLegend) {
+      if (series.isExistGrp || !series.showLegend) {
+        return;
+      }
+
+      if (this.useTable) {
+        this.addLegendWithValues(series);
+      } else {
         this.addLegend(series);
       }
     });
   },
 
+  /**
+   * Add Legend with Color Information
+   * Only Heatmap chart
+   *
+   * @returns {undefined}
+   */
   addColorLegendList() {
     const seriesList = this.seriesList;
 
@@ -120,6 +179,31 @@ const modules = {
     });
   },
 
+  /**
+   * Get Container DOM by Event Object
+   * @param e Event
+   *
+   * @returns {Element}
+   */
+  getContainerDOM(e) {
+    let targetDOM = null;
+    const type = e.target.dataset.type;
+
+    const childTypes = ['name', 'color', 'min', 'max', 'avg', 'total', 'last'];
+
+    if (type === 'container') {
+      targetDOM = e.target;
+    } else if (childTypes.includes(type)) {
+      targetDOM = e.target.parentElement;
+
+      if (!targetDOM?.series) {
+        targetDOM = targetDOM.parentElement;
+      }
+    }
+
+    return targetDOM;
+  },
+
   /**
    * Initialize legend event
    *
@@ -129,6 +213,14 @@ const modules = {
     if (this.isInitLegend) {
       return;
     }
+
+    const classList = {
+      container: `ev-chart-legend${this.useTable ? '--table__container' : '-container'}`,
+      color: `ev-chart-legend${this.useTable ? '--table__color' : '-color'}`,
+      name: `ev-chart-legend${this.useTable ? '--table__name' : '-name'}`,
+      value: `ev-chart-legend${this.useTable ? '--table__value' : '-value'}`,
+    };
+
     /**
      * callback for legendBoxDOM to show/hide clicked series
      *
@@ -136,22 +228,19 @@ const modules = {
      */
     this.onLegendBoxClick = (e) => {
       const opt = this.options.legend;
-      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 {
+      const targetDOM = this.getContainerDOM(e);
+      if (!targetDOM) {
         return;
       }
 
-      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 series = nameDOM?.series;
+      const series = targetDOM?.series;
 
+      const colorDOM = targetDOM?.getElementsByClassName(classList.color)[0];
+      const nameDOM = targetDOM?.getElementsByClassName(classList.name)[0];
+      const valueDOMList = targetDOM?.getElementsByClassName(classList.value);
+
+      const isActive = !targetDOM?.className.includes('inactive');
       if (isActive && this.seriesInfo.count === 1) {
         return;
       }
@@ -162,9 +251,14 @@ const modules = {
 
       if (isActive) {
         this.seriesInfo.count--;
-        colorDOM.style.backgroundColor = opt.inactive;
-        colorDOM.style.borderColor = opt.inactive;
-        nameDOM.style.color = opt.inactive;
+
+        const inactiveColor = opt.inactive;
+        colorDOM.style.backgroundColor = inactiveColor;
+        colorDOM.style.borderColor = inactiveColor;
+        nameDOM.style.color = inactiveColor;
+        valueDOMList?.forEach((dom) => {
+          dom.style.color = inactiveColor;
+        });
       } else {
         this.seriesInfo.count++;
 
@@ -184,11 +278,14 @@ const modules = {
         }
 
         nameDOM.style.color = opt.color;
+        valueDOMList?.forEach((dom) => {
+          const style = opt.table?.columns[dom.dataset.type]?.style;
+          dom.style.color = style?.color ? style.color : opt.color;
+        });
       }
 
       series.show = !series.show;
-      colorDOM.classList.toggle('inactive');
-      nameDOM.classList.toggle('inactive');
+      targetDOM.classList.toggle('inactive');
 
       this.update({
         updateSeries: false,
@@ -202,36 +299,20 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxOver = (e) => {
-      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 {
+      const targetDOM = this.getContainerDOM(e);
+      if (!targetDOM) {
         return;
       }
-      const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
-      const targetId = nameDOM.series.sId;
-      const selectSeriesOption = this.options.selectSeries;
-      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
-
-      Object.values(this.seriesList).forEach((series) => {
-        series.state = series.sId === targetId
-        || (selectSeriesOption.use && selectedList.includes(targetId))
-          ? 'highlight' : 'downplay';
-      });
 
-      let hitInfo = null;
-      if (Util.isPieType(this.options.type)) {
-        hitInfo = { sId: targetId, type: this.options.type };
-      }
+      const targetId = targetDOM?.series?.sId;
+      const legendHitInfo = { sId: targetId, type: this.options.type };
 
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
-        hitInfo,
+        hitInfo: {
+          legend: legendHitInfo,
+        },
       });
     };
 
@@ -241,20 +322,12 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxLeave = () => {
-      const selectSeriesOption = this.options.selectSeries;
-      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
-      Object.values(this.seriesList).forEach((series) => {
-        if (selectSeriesOption.use && selectedList.length) {
-          series.state = selectedList.includes(series.sId)
-            ? 'highlight' : 'downplay';
-        } else {
-          series.state = 'normal';
-        }
-      });
-
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
+        hitInfo: {
+          legend: null,
+        },
       });
     };
 
@@ -265,10 +338,15 @@ const modules = {
     this.initResizeEvent();
   },
 
+  /**
+   * Init Event on Color Legend
+   * Only Heatmap
+   */
   initEventForColorLegend() {
     if (this.isInitLegend) {
       return;
     }
+
     /**
      * callback for legendBoxDOM to show/hide clicked series
      *
@@ -277,21 +355,16 @@ const modules = {
     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 {
+      const targetDOM = this.getContainerDOM(e);
+      if (!targetDOM) {
         return;
       }
 
       const colorDOM = targetDOM?.getElementsByClassName('ev-chart-legend-color')[0];
       const nameDOM = targetDOM?.getElementsByClassName('ev-chart-legend-name')[0];
+      const targetId = targetDOM?.series?.cId;
       const isActive = !colorDOM?.className.includes('inactive');
-      const targetId = nameDOM.series.cId;
       const activeCount = series.colorState.filter(colorItem => colorItem.show).length;
 
       if (isActive && activeCount === 1) {
@@ -307,7 +380,7 @@ const modules = {
         colorDOM.style.borderColor = opt.inactive;
         nameDOM.style.color = opt.inactive;
       } else {
-        colorDOM.style.backgroundColor = nameDOM.series.color;
+        colorDOM.style.backgroundColor = targetDOM?.series?.color;
         nameDOM.style.color = opt.color;
       }
 
@@ -324,25 +397,21 @@ const modules = {
         updateSelTip: { update: true, keepDomain: true },
       });
     };
+
     /**
      * callback for legendBoxDOM hovering
      *
      * @returns {undefined}
      */
     this.onLegendBoxOver = (e) => {
-      const type = e.target.dataset.type;
-      const series = Object.values(this.seriesList)[0];
+      const series = Object.values(this.seriesList)?.[0];
 
-      let targetDOM;
-      if (type === 'container') {
-        targetDOM = e.target;
-      } else if (type === 'name' || type === 'color') {
-        targetDOM = e.target.parentElement;
-      } else {
+      const targetDOM = this.getContainerDOM(e);
+      if (!targetDOM) {
         return;
       }
-      const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
-      const targetId = nameDOM.series.cId;
+
+      const targetId = targetDOM?.series?.cId;
 
       series.colorState.forEach((colorItem) => {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
@@ -370,6 +439,7 @@ 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);
@@ -431,6 +501,7 @@ const modules = {
    */
   updateLegend() {
     this.resetLegend();
+
     if (this.isHeatMapType) {
       this.addColorLegendList();
     } else {
@@ -438,21 +509,80 @@ const modules = {
     }
   },
 
+  /**
+   * To update value text on legend table
+   * Only chartOption > legend > table > use : true
+   *
+   * @returns {undefined}
+   */
+  updateLegendTableValues() {
+    const columns = this.options?.legend?.table?.columns;
+    const aggregations = this.getAggregations();
+    const rowDOMList = this.legendBoxDOM?.getElementsByClassName('ev-chart-legend--table__row');
+
+    rowDOMList.forEach((row) => {
+      const valueDOMList = row?.getElementsByClassName('ev-chart-legend--table__value');
+
+      valueDOMList.forEach((dom) => {
+        const key = dom.dataset.type;
+        if (key === 'name') {
+          return;
+        }
+
+        const seriesId = row.series.sId;
+        const value = +aggregations?.[seriesId]?.[key];
+        dom.textContent = this.getFormattedValue(columns[key], value);
+      });
+    });
+  },
+
+  /**
+   * Force Update Legend. Remove and Create
+   *
+   * @returns {undefined}
+   */
+  forceUpdateLegend() {
+    this.destroyLegend();
+    this.initLegend();
+  },
+
   /**
    * To update legend, remove all of legendBoxDOM's children
    *
    * @returns {undefined}
    */
   resetLegend() {
-    const legendDOM = this.legendBoxDOM;
+    const legendBoxDOM = this.legendBoxDOM;
 
-    if (!legendDOM) {
+    if (!legendBoxDOM) {
       return;
     }
 
-    while (legendDOM.hasChildNodes()) {
-      legendDOM.removeChild(legendDOM.firstChild);
+    while (legendBoxDOM.hasChildNodes()) {
+      legendBoxDOM.removeChild(legendBoxDOM.firstChild);
+    }
+
+    this.seriesInfo.count = 0;
+  },
+
+  /**
+   * To update legend, remove all of legendBoxDOM's children
+   *
+   * @returns {undefined}
+   */
+  destroyLegend() {
+    const legendDOM = this.legendDOM;
+
+    if (!legendDOM) {
+      return;
     }
+
+    legendDOM.remove();
+
+    this.legendDOM = null;
+    this.legendBoxDOM = null;
+    this.resizeDOM = null;
+    this.isInitLegend = false;
     this.seriesInfo.count = 0;
   },
 
@@ -467,7 +597,9 @@ const modules = {
     const colorDOM = document.createElement('span');
     const nameDOM = document.createElement('div');
 
-    containerDOM.className = 'ev-chart-legend-container';
+    containerDOM.className = `ev-chart-legend-container ${!series.show ? ' inactive' : ''}`;
+    containerDOM.series = series;
+
     colorDOM.className = 'ev-chart-legend-color';
 
     if (series.type === 'line' && series.point && !series.fill) {
@@ -475,10 +607,12 @@ const modules = {
     }
 
     nameDOM.className = 'ev-chart-legend-name';
-    nameDOM.series = series;
 
+    // set series color
     let seriesColor;
-    if (typeof series.color !== 'string') {
+    if (!series.show) {
+      seriesColor = opt.inactive;
+    } else if (typeof series.color !== 'string') {
       seriesColor = series.color[series.color.length - 1][1];
     } else {
       seriesColor = series.color;
@@ -486,7 +620,7 @@ const modules = {
 
     if (series.type === 'line' && series.fill) {
       colorDOM.style.height = '8px';
-      colorDOM.style.backgroundColor = `${seriesColor}80`;
+      colorDOM.style.backgroundColor = series.show ? `${seriesColor}80` : opt.inactive;
       colorDOM.style.border = `1px solid ${seriesColor}`;
     } else {
       colorDOM.style.backgroundColor = seriesColor;
@@ -515,7 +649,130 @@ const modules = {
     containerDOM.dataset.type = 'container';
 
     this.legendBoxDOM.appendChild(containerDOM);
-    this.seriesInfo.count++;
+    if (series.show) {
+      this.seriesInfo.count++;
+    }
+  },
+
+  /**
+   * Add Legend Items With aggregation Values
+   * Only chartOption > legend > table > use : true
+   * @param series
+   */
+  addLegendWithValues(series) {
+    const opt = this.options.legend;
+    const columns = opt?.table?.columns;
+
+    const aggregations = this.getAggregations()?.[series?.sId];
+    if (!aggregations || !columns) {
+      return;
+    }
+
+    // create row
+    const rowDOM = document.createElement('tr');
+    rowDOM.className = `ev-chart-legend--table__row ${!series.show ? ' inactive' : ''}`;
+    Util.setDOMStyle(rowDOM, opt.table?.style?.row);
+    rowDOM.series = series;
+    rowDOM.dataset.type = 'container';
+
+    // create td - color
+    const colorWrapperDOM = document.createElement('td');
+    colorWrapperDOM.className = 'ev-chart-legend--table__color-wrapper';
+    colorWrapperDOM.dataset.type = 'color';
+
+    const colorDOM = document.createElement('div');
+    colorDOM.className = 'ev-chart-legend--table__color';
+    colorDOM.dataset.type = 'color';
+
+    // set series color
+    let seriesColor;
+    if (!series.show) {
+      seriesColor = opt.inactive;
+    } else if (typeof series.color !== 'string') {
+      seriesColor = series.color[series.color.length - 1][1];
+    } else {
+      seriesColor = series.color;
+    }
+
+    switch (series.type) {
+      case 'line': {
+        if (series.fill) {
+          colorDOM.style.backgroundColor = `${seriesColor}80`;
+          colorDOM.style.border = `1px solid ${seriesColor}`;
+        } else {
+          if (series.point) {
+            colorDOM.className += ' ev-chart-legend--table__color--point-line';
+          }
+
+          colorDOM.className += ' ev-chart-legend--table__color--line';
+          colorDOM.style.backgroundColor = seriesColor;
+        }
+        break;
+      }
+
+      case 'bar':
+      case 'pie':
+      default: {
+        colorDOM.style.height = '10px';
+        colorDOM.style.backgroundColor = seriesColor;
+        break;
+      }
+    }
+
+    if (series.type === 'line' && series.fill) {
+      colorDOM.style.height = '8px';
+      colorDOM.style.backgroundColor = series.show ? `${seriesColor}80` : opt.inactive;
+      colorDOM.style.border = `1px solid ${seriesColor}`;
+    } else {
+      colorDOM.style.backgroundColor = seriesColor;
+    }
+
+    colorWrapperDOM.appendChild(colorDOM);
+    rowDOM.appendChild(colorWrapperDOM);
+
+    // create td - name
+    const nameDOM = document.createElement('td');
+    nameDOM.className = 'ev-chart-legend--table__name';
+    nameDOM.style.color = series.show ? opt.color : opt.inactive;
+    nameDOM.textContent = series.name;
+    nameDOM.setAttribute('title', series.name);
+    nameDOM.dataset.type = 'name';
+    Util.setDOMStyle(nameDOM, columns?.name?.style);
+
+    if (!series.show) {
+      nameDOM.style.color = opt.inactive;
+    }
+
+    rowDOM.appendChild(nameDOM);
+
+    // create td - values
+    const columnKeyList = Object.keys(columns);
+    columnKeyList?.forEach((key) => {
+      if (key === 'name') {
+        return;
+      }
+
+      if (columns[key].use) {
+        const formattedTxt = this.getFormattedValue(columns[key], +aggregations[key]);
+        const valueDOM = document.createElement('td');
+        valueDOM.className = 'ev-chart-legend--table__value';
+        valueDOM.style.color = series.show ? opt.color : opt.inactive;
+        valueDOM.textContent = formattedTxt;
+        valueDOM.dataset.type = key.toString();
+        Util.setDOMStyle(valueDOM, columns[key]?.style);
+
+        if (!series.show) {
+          valueDOM.style.color = opt.inactive;
+        }
+
+        rowDOM.appendChild(valueDOM);
+      }
+    });
+
+    this.legendTableDOM.appendChild(rowDOM);
+    if (series.show) {
+      this.seriesInfo.count++;
+    }
   },
 
   /**
@@ -684,6 +941,7 @@ const modules = {
       }
     }
   },
+
   /**
    * When user moves resizeDOM, this function will change css
    *
@@ -863,6 +1121,28 @@ const modules = {
     legendStyle.height = '0';
     wrapperStyle.padding = `${title}px 0 0 0`;
   },
+
+  /**
+   * Get formatted value by formatter function
+   * Only chartOption > legend > table > use : true
+   * @param formatter
+   * @param decimalPoint
+   * @param value
+   * @returns {string}
+   */
+  getFormattedValue({ formatter, decimalPoint }, value) {
+    let formattedTxt;
+    if (formatter) {
+      formattedTxt = formatter(value);
+    }
+
+    if (!formatter || typeof formattedTxt !== 'string') {
+      formattedTxt = Util.labelSignFormat(value, decimalPoint);
+    }
+
+    return formattedTxt;
+  },
+
 };
 
 export default modules;

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

@@ -47,6 +47,10 @@ const modules = {
         radius -= pieOption.pieStroke.lineWidth;
       }
 
+      if (radius < 0) {
+        return;
+      }
+
       pie.or = radius;
       if (ix < pieDataSet.length - 1) {
         pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
@@ -77,7 +81,9 @@ const modules = {
               ctx.stroke();
             }
 
-            series.isSelect = hitInfo?.sId === slice.id;
+            const { selectInfo, legendHitInfo } = hitInfo;
+            series.isSelect = selectInfo?.sId === slice.id;
+            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
             series.type = isDoughnut ? 'doughnut' : 'pie';
             series.centerX = centerX;
             series.centerY = centerY;
@@ -138,6 +144,10 @@ const modules = {
         radius -= pieOption.pieStroke.lineWidth;
       }
 
+      if (radius < 0) {
+        return;
+      }
+
       pie.or = radius;
       if (ix < pieDataSet.length - 1) {
         pie.ir = outerRadius - (((outerRadius - innerRadius) / pieDataSet.length) * (ix + 1));
@@ -175,7 +185,9 @@ const modules = {
               ctx.stroke();
             }
 
-            series.isSelect = hitInfo?.sId === slice.id;
+            const { selectInfo, legendHitInfo } = hitInfo;
+            series.isSelect = selectInfo?.sId === slice.id;
+            series.isDownplay = (legendHitInfo && legendHitInfo.sId !== slice.id);
             series.type = 'sunburst';
             series.centerX = centerX;
             series.centerY = centerY;