evui 3.3.11 → 3.3.14

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

@@ -250,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectInfo;
     let drawTip = false;
 
     if (dataIndex.length) {
@@ -264,86 +264,82 @@ const modules = {
         y1: chartRect.y1 + labelOffset.top,
         y2: chartRect.y2 - labelOffset.bottom,
       };
+      const labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
+      const valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
+      const valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
+      const valuePositionCalcFunction = isHorizontal ? Canvas.calculateX : Canvas.calculateY;
+      const labelPositionCalcFunction = isHorizontal ? Canvas.calculateY : Canvas.calculateX;
 
-      const labelAxes = this.options.horizontal ? this.axesY[0] : this.axesX[0];
-      const labelStartPoint = aPos[labelAxes.units.rectStart];
-      const labelEndPoint = aPos[labelAxes.units.rectEnd];
-      const labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
-
-      const valueAxes = this.options.horizontal ? this.axesX[0] : this.axesY[0];
-      const valueStartPoint = aPos[valueAxes.units.rectStart];
-
-      const offset = this.options.type === 'bar' ? 4 : 6;
       const chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       const chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      const valueSpace = isHorizontal ? chartWidth : chartHeight;
+      const valueStartPoint = aPos[valueAxes.units.rectStart];
+      let offset = this.options.type === 'bar' ? 4 : 6;
+      offset *= isHorizontal ? 1 : -1;
+
+      const seriesList = Object.keys(this.seriesList ?? {});
+      const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
+      const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+      const groups = this.data.groups?.[0] ?? [];
+
+      let gp;
+      let dp;
+      let value;
+      let labelStartPoint;
+      let labelEndPoint;
+      let labelGap;
+      let graphX;
+      let lineSeries;
+      let sizeObj;
+
+      if (labelAxes.labels) {
+        labelStartPoint = aPos[labelAxes.units.rectStart];
+        labelEndPoint = aPos[labelAxes.units.rectEnd];
+        labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+      } else {
+        graphX = this.axesSteps.x[0];
+        lineSeries = seriesList.find(sId => this.seriesList[sId]?.type === 'line');
+        sizeObj = this.seriesList[lineSeries].size;
+      }
 
-      dataIndex.forEach((idx, i) => {
-        const labelCenter = Math.round(labelStartPoint + (labelGap * idx));
-        let gp;
-        const dp = labelCenter + (labelGap / 2);
+      data.forEach((selectedData, i) => {
         if (labelTipOpt.fixedPosTop) {
-          if (isHorizontal) {
-            gp = Canvas.calculateX(
-              this.axesRange.x[0].max,
-              this.axesRange.x[0].min,
-              this.axesRange.x[0].max,
-              chartWidth,
-              valueStartPoint);
-            gp += offset;
-          } else {
-            gp = Canvas.calculateY(
-                this.axesRange.y[0].max,
-                this.axesRange.y[0].min,
-                this.axesRange.y[0].max,
-                chartHeight,
-                valueStartPoint);
-            gp -= offset;
-          }
-        } else if (isHorizontal) {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.x[0].max;
-          }
-
-          gp = Canvas.calculateX(
-            maxValue,
-            this.axesRange.x[0].min,
-            this.axesRange.x[0].max,
-            chartWidth,
-            valueStartPoint);
-          gp += offset;
+          value = valueAxesRange.max;
+        } else if (isExistGrp) {
+          const sumValue = visibleSeries.reduce((ac, sId) => (
+            groups.includes(sId) ? ac + (selectedData[sId]?.value ?? selectedData[sId]) : ac), 0);
+          const nonGroupValues = visibleSeries
+            .filter(sId => !groups.includes(sId))
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...nonGroupValues, sumValue);
+        } else if (visibleSeries.length) {
+          const visibleValue = visibleSeries
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...visibleValue);
         } else {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.y[0].max;
-          }
+          value = valueAxesRange.max;
+        }
+
+        if (labelAxes.labels) {
+          const labelCenter = Math.round(labelStartPoint + (labelGap * dataIndex[i]));
 
-          gp = Canvas.calculateY(
-              maxValue,
-              this.axesRange.y[0].min,
-              this.axesRange.y[0].max,
-              chartHeight,
-              valueStartPoint);
-          gp -= offset;
+          dp = labelCenter + (labelGap / 2);
+        } else {
+          dp = labelPositionCalcFunction(
+            label[i],
+            graphX.graphMin,
+            graphX.graphMax,
+            chartWidth - sizeObj.comboOffset,
+            aPos.x1 + (sizeObj.comboOffset / 2),
+          );
         }
+        gp = valuePositionCalcFunction(
+          value,
+          valueAxesRange.min,
+          valueAxesRange.max,
+          valueSpace,
+          valueStartPoint);
+        gp += offset;
 
         this.showTip({
           context: this.bufferCtx,

package/src/components/chart/helpers/helpers.constant.js

@@ -129,17 +129,19 @@ export const PLOT_BAND_OPTION = {
 };
 
 export const HEAT_MAP_OPTION = {
-  ...LINE_OPTION,
-  colorOpt: {
-    min: '#FFFFFF',
-    max: '#0052FF',
-    categoryCnt: 5,
-    border: '#FFFFFF',
-    error: '#FF0000',
-  },
-  spaces: {
-    x: 0,
-    y: 0,
+  show: true,
+  highlight: {
+    maxShadowOpacity: 0.4,
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+    decimalPoint: 0,
   },
 };
 

package/src/components/chart/model/model.series.js

@@ -54,7 +54,7 @@ const modules = {
       return new Pie(id, opt, index);
     } else if (type === 'heatMap') {
       this.seriesInfo.charts.heatMap.push(id);
-      return new HeatMap(id, opt, index);
+      return new HeatMap(id, opt, this.options.heatMapColor);
     }
 
     return false;

package/src/components/chart/model/model.store.js

@@ -1,6 +1,5 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
-import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -37,8 +36,9 @@ const modules = {
             const sData = data[seriesID];
 
             if (series && sData) {
+              series.labels = label;
               series.data = this.addSeriesDSForHeatMap(sData);
-              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.minMax = this.getSeriesMinMax(series.data);
               series.valueOpt = this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -301,17 +301,20 @@ const modules = {
   /**
    * Take data to create data for each series
    * @param {array} data data array for each series
+   * @param {object}  label   chart label
+   *
    * @returns {array} data info added position and etc
    */
   addSeriesDSForHeatMap(data) {
-    return data.map(item => ({
-      x: item.x,
-      y: item.y,
-      o: item.value,
+    return data.map(({ x, y, value }) => ({
+      x,
+      y,
+      o: value,
       xp: null,
       yp: null,
+      w: null,
+      h: null,
       dataColor: null,
-      value: item.value,
       cId: null,
     }));
   },
@@ -414,73 +417,14 @@ const modules = {
     return def;
   },
 
-  adjustMinMax(max, min, opt, space) {
-    if ((opt.type === 'time' && opt.categoryMode) || opt.type === 'step') {
-      return {
-        max,
-        min,
-      };
-    }
-
-    let targetMax = max;
-    let targetMin = min;
-    if (targetMax > 0 && opt.interval && space) {
-      if (targetMax < (opt.interval * space)) {
-        targetMax += opt.interval;
-      }
-    }
-
-    let targetInterval = opt.interval;
-    if (opt.type === 'time') {
-      if (typeof targetInterval === 'string') {
-        targetInterval = TIME_INTERVALS[targetInterval].size;
-      } else if (typeof targetInterval === 'object') {
-        targetInterval = targetInterval.time * TIME_INTERVALS[targetInterval.unit].size;
-      }
-    }
-
-    if (!opt.startToZero || targetMin > 0) {
-      const targetSpace = space ? (space - 1) : (targetMax - targetMin);
-      const targetStep = Math.ceil((max - targetMin) / targetSpace);
-        targetMin = targetMin < targetStep ? 0 : targetMin - targetStep;
-    }
-
-    return {
-      max: targetMax,
-      min: targetMin,
-    };
-  },
-  /**
-   * Take series data to create min/max info for each series
-   * @param data
-   * @param spaces
-   * @returns {*|{maxDomain: null, minY: null, minX: null, maxY: null, maxX: null}}
-   */
-  getSeriesMinMaxForHeatMap(data, spaces) {
-    const axesXOption = this.options.axesX[0];
-    const axesYOption = this.options.axesY[0];
-    const seriesMinMax = this.getSeriesMinMax(data);
-
-    const adjustX = this.adjustMinMax(seriesMinMax.maxX, seriesMinMax.minX, axesXOption, spaces.x);
-    seriesMinMax.maxX = adjustX.max;
-    seriesMinMax.minX = adjustX.min;
-
-    const adjustY = this.adjustMinMax(seriesMinMax.maxY, seriesMinMax.minY, axesYOption, spaces.y);
-    seriesMinMax.maxY = adjustY.max;
-    seriesMinMax.minY = adjustY.min;
-
-    return seriesMinMax;
-  },
-
   getSeriesValueOptForHeatMap(series) {
     const data = series.data;
-    const colorOpt = series.colorOpt;
-    const colorAxis = series.colorAxis;
+    const colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
 
     let maxValue = 0;
     let isExistError = false;
-    data.forEach(({ value }) => {
+    data.forEach(({ o: value }) => {
       if (maxValue < value) {
         maxValue = value;
       }
@@ -488,18 +432,19 @@ const modules = {
         isExistError = true;
       }
     });
-    const valueInterval = Math.ceil(maxValue / categoryCnt);
-    if (isExistError && colorAxis.length === categoryCnt) {
-      colorAxis.push({
+
+    if (isExistError && series.colorAxis.length === categoryCnt) {
+      series.colorAxis.push({
         id: `color#${categoryCnt}`,
         value: colorOpt.error,
         state: 'normal',
         show: true,
       });
     }
+
     return {
       max: maxValue,
-      interval: valueInterval,
+      interval: Math.ceil(maxValue / categoryCnt),
       existError: isExistError,
     };
   },
@@ -673,6 +618,101 @@ const modules = {
     };
   },
 
+  /**
+   * Find seriesId by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked series id
+   */
+  getSeriesIdByPosition(offset) {
+    const [clickedX, clickedY] = offset;
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+    const valueAxes = this.axesY[0];
+    const labelAxes = this.axesX[0];
+    const valueStartPoint = aPos[valueAxes.units.rectStart];
+    const valueEndPoint = aPos[valueAxes.units.rectEnd];
+    const labelStartPoint = aPos[labelAxes.units.rectStart];
+    const labelEndPoint = aPos[labelAxes.units.rectEnd];
+
+    const result = { sId: null };
+
+    if (clickedY > valueEndPoint && clickedY < valueStartPoint
+      && clickedX < labelEndPoint && clickedX > labelStartPoint) {
+      let hitSeries;
+      let positionList;
+      const hitItem = this.findHitItem(offset);
+      const hitSeriesList = Object.keys(hitItem.items);
+
+      switch (this.options.type) {
+        case 'line': {
+          const orderedSeriesList = this.seriesInfo.charts.line;
+          const isStackChart = Object.values(this.seriesList).some(({ stackIndex }) => stackIndex);
+
+          if (hitSeriesList.length) { // 클릭한 위치에 data 가 존재하는 경우
+            if (isStackChart) {
+              positionList = orderedSeriesList.filter(sId => hitSeriesList.includes(sId))
+                .map(sId => ({ sId, position: hitItem.items[sId]?.data?.yp }));
+              hitSeries = positionList.find(({ position }) => clickedY > position)?.sId;
+            } else {
+              hitSeries = Object.entries(hitItem.items).find(([, { hit }]) => hit)?.[0];
+            }
+          } else { // 클릭한 위치에 data 가 존재하지 않는 경우
+            const visibleSeriesList = orderedSeriesList.filter(sId => this.seriesList[sId].show);
+            positionList = visibleSeriesList.map(sId => ({
+              sId,
+              position: this.seriesList[sId].data?.map(({ xp, yp }) => [xp, yp]),
+            }));
+            const dataIndex = positionList[0].position?.findIndex(([xp]) => xp >= clickedX);
+            const vectorList = positionList.map(({ sId, position }) => ({
+              sId,
+              vector: { start: position[dataIndex - 1], end: position[dataIndex] },
+            }));
+
+            // canvas 의 클릭 위치값은 제 4 사분면의 위치이므로 clickedY, y1, y2 의 값은 음수를 취한다.
+            if (isStackChart) {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const v1 = [x2 - x1, y1 - y2];
+                const v2 = [x2 - clickedX, clickedY - y2];
+                const xp = v1[0] * v2[1] - v1[1] * v2[0];
+
+                return vector.start.every(v => typeof v === 'number')
+                  && vector.end.every(v => typeof v === 'number')
+                  && xp > 0;
+              })?.sId;
+            } else {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const a = (y1 - y2) / (x2 - x1);
+                const b = -1;
+                const c = -y1 - a * x1;
+                const distance = Math.abs(a * clickedX - b * clickedY + c)
+                  / Math.sqrt(a ** 2 + b ** 2);
+
+                return distance < 3;
+              })?.sId;
+            }
+          }
+          break;
+        }
+        default:
+          break;
+      }
+
+      result.sId = hitSeries;
+    }
+
+    return result;
+  },
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y
@@ -699,8 +739,8 @@ const modules = {
       const index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
-      hitInfo = this.getItemByPosition(offset, false);
-      labelIndex = hitInfo.maxIndex;
+      hitInfo = this.getItemByPosition(offset, this.options.selectLabel.useApproximateValue);
+      labelIndex = hitInfo.maxIndex ?? -1;
     }
 
     return {

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

@@ -56,6 +56,8 @@ const modules = {
           this.setTooltipLayoutPosition(hitInfo, e);
           if (type === 'scatter') {
             this.drawTooltipForScatter(hitInfo, this.tooltipCtx);
+          } else if (type === 'heatMap') {
+            this.drawToolTipForHeatMap(hitInfo, this.tooltipCtx);
           } else {
             this.drawTooltip(hitInfo, this.tooltipCtx);
           }
@@ -112,7 +114,7 @@ const modules = {
           this.render(hitInfo);
         }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId } = hitInfo);
+        ({ label: args.label, value: args.value, sId: args.seriesId, acc: args.acc } = hitInfo);
       }
 
       if (typeof this.listeners['dbl-click'] === 'function') {
@@ -140,16 +142,24 @@ const modules = {
           value: args.value,
           sId: args.seriesId,
           maxIndex: args.dataIndex,
+          acc: args.acc,
         } = hitInfo);
-      }
-
-      if (this.options.selectLabel.use) {
+      } else if (this.options.selectLabel.use) {
         const offset = this.getMousePosition(e);
         const clickedLabelInfo = this.getLabelInfoByPosition(offset);
         const selected = this.selectLabel(clickedLabelInfo.labelIndex);
-        this.renderWithSelectLabel(selected.dataIndex);
+        this.renderWithSelected(selected.dataIndex);
+
+        args.selected = cloneDeep(this.defaultSelectInfo);
+      } else if (this.options.selectSeries.use) {
+        const offset = this.getMousePosition(e);
+        const hitInfo = this.getSeriesIdByPosition(offset);
+        if (hitInfo.sId !== null) {
+          const selected = this.selectSeries(hitInfo.sId);
+          this.renderWithSelected(selected.seriesId);
+        }
 
-        args.selected = cloneDeep(this.defaultSelectLabelInfo);
+        args.selected = cloneDeep(this.defaultSelectInfo);
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -453,28 +463,51 @@ const modules = {
   },
 
   /**
-   * render after select label by index list
+   * render after selected label or selected series
    * @param indexList {array}  '[0, 1 ...]'
    */
-  renderWithSelectLabel(indexList) {
-    this.defaultSelectLabelInfo.dataIndex = indexList;
-    this.initSelectedLabelInfo();
+  renderWithSelected(list) {
+    if (this.options.selectLabel.use) {
+      this.defaultSelectInfo.dataIndex = list;
+    } else if (this.options.selectSeries.use) {
+      this.defaultSelectInfo.seriesId = list;
+    }
+    this.initSelectedInfo();
     this.render();
   },
 
   /**
-   * init defaultSelectLabelInfo object.
-   * (set each series data and label text)
+   * init defaultSelectInfo object.
+   * - at selectLabel using: set each series data and label text
+   * - at selectSeries using: set series state
    */
-  initSelectedLabelInfo() {
-    const { use, limit } = this.options.selectLabel;
-    const infoObj = this.defaultSelectLabelInfo;
-    if (use && infoObj?.dataIndex) {
+  initSelectedInfo() {
+    if (this.options.selectLabel.use) {
+      const { limit } = this.options.selectLabel;
+      if (!this.defaultSelectInfo) {
+        this.defaultSelectInfo = { dataIndex: [] };
+      }
+      const infoObj = this.defaultSelectInfo;
       infoObj.dataIndex.splice(limit);
       infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
       const dataEntries = Object.entries(this.data.data);
       infoObj.data = infoObj.dataIndex.map(labelIdx => Object.fromEntries(
         dataEntries.map(([sId, data]) => [sId, data[labelIdx]])));
+    } else if (this.options.selectSeries.use) {
+      if (!this.defaultSelectInfo) {
+        this.defaultSelectInfo = { seriesId: [] };
+      }
+
+      const selectedList = this.defaultSelectInfo.seriesId;
+      Object.values(this.seriesList).forEach((series) => {
+        if (!selectedList.length) {
+          series.state = 'normal';
+        } else if (selectedList.includes(series.sId)) {
+          series.state = 'highlight';
+        } else {
+          series.state = 'downplay';
+        }
+      });
     }
   },
 
@@ -485,7 +518,7 @@ const modules = {
    */
   selectLabel(labelIndex) {
     const option = this.options?.selectLabel ?? {};
-    const before = this.defaultSelectLabelInfo ?? { dataIndex: [] };
+    const before = this.defaultSelectInfo ?? { dataIndex: [] };
     const after = cloneDeep(before);
 
     if (before.dataIndex.includes(labelIndex)) {
@@ -505,6 +538,28 @@ const modules = {
     return after;
   },
 
+  selectSeries(seriesId) {
+    const option = this.options?.selectSeries ?? {};
+    const before = this.defaultSelectInfo ?? { seriesId: [] };
+    const after = cloneDeep(before);
+
+    if (before.seriesId.includes(seriesId)) {
+      const idx = before.seriesId.indexOf(seriesId);
+      after.seriesId.splice(idx, 1);
+    } else if (seriesId) {
+      after.seriesId.push(seriesId);
+      if (option.limit > 0 && option.limit < after.seriesId.length) {
+        if (option.useDeselectOverflow) {
+          after.seriesId.splice(0, 1);
+        } else {
+          after.seriesId.pop();
+        }
+      }
+    }
+
+    return after;
+  },
+
   /**
    * Find items by series within a range
    * @param {object} range  object for find series items

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

@@ -80,10 +80,12 @@ const modules = {
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
         const { colorAxis, valueOpt } = series;
+        const { max, interval, existError } = valueOpt;
         colorAxis.forEach((colorItem, index) => {
-          const maxValue = valueOpt.interval * (index + 1);
-          const minValue = maxValue - valueOpt.interval;
-          const name = valueOpt.existError && index === colorAxis.length - 1
+          const minValue = interval * index;
+          const maxValue = index === colorAxis.length - 1
+            ? max : minValue + interval - 1;
+          const name = existError && index === colorAxis.length - 1
             ? 'error' : `${minValue} - ${maxValue}`;
           this.addLegend({
             cId: colorItem.id,
@@ -189,9 +191,13 @@ const modules = {
       }
       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 ? 'highlight' : 'downplay';
+        series.state = series.sId === targetId
+        || (selectSeriesOption.use && selectedList.includes(targetId))
+          ? 'highlight' : 'downplay';
       });
 
       this.update({
@@ -207,8 +213,15 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxLeave = () => {
+      const selectSeriesOption = this.options.selectSeries;
+      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
       Object.values(this.seriesList).forEach((series) => {
-        series.state = 'normal';
+        if (selectSeriesOption.use && selectedList.length) {
+          series.state = selectedList.includes(series.sId)
+            ? 'highlight' : 'downplay';
+        } else {
+          series.state = 'normal';
+        }
       });
 
       this.update({