@jiaminghi/data-view-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -1,7 +0,27 @@
-# 2.4.5-alpha (2019-++-++)
+# 1.0.2-alpha (2019-09-27)
 
+### Bug 修复
+
+- **co:** Generator 自动执行异常.
+
+### 优化组件
+
+- **ActiveRingChart**
+- **DigitalFlop**
+- **FullScreenContainer**
+- **PercentPond**
+- **ScrollBoard**
+- **ScrollBankingBoard**
+- **WaterLevelPond**
+
+# 1.0.1-alpha (2019-09-24)
+
+### Bug 修复
+
+- **activeRingChart:** 由于数据值为 0 而导致计算异常.
+
 # 1.0.0-alpha (2019-09-23)
 
-### Init
+### 初始化代码
 
-- **Vue to React:** Convert **Vue** component to **React** component.
+- **Vue to React:** 转换 **Vue** 组件 为 **React** 组件.

es/activeRingChart/index.js

 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { c as co } from '../index-edb6df58.js';
-import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
+import { c as co } from '../index-bedaa24c.js';
+import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
-import '../index-8b5c3ecc.js';
-import '../index-207528fb.js';
-import { C as Charts } from '../index-9fee2098.js';
-import DvDigitalFlop from '../digitalFlop/index.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
+import '../index-6660d106.js';
+import '../index-43e58b64.js';
+import { C as Charts } from '../index-fbf886e8.js';
+import DigitalFlop from '../digitalFlop/index.js';
 
@@ -174,3 +174,3 @@ var css = ".dv-active-ring-chart {\n  position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n  width: 100%;\n  height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n  width: 100px;\n  height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n  width: 100px;\n  height: 30px;\n  color: #fff;\n  text-align: center;\n  vertical-align: middle;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n";
 
-    option = _extends({}, option, {
+    return _extends({}, option, {
       series: option.series.reduce(function (prev, serie, index) {
@@ -186,4 +186,2 @@ return index !== 0 ? [].concat(toConsumableArray(prev), [serie]) : [].concat(toConsumableArray(prev), [_extends({}, serie, {
     });
-
-    return option;
   }
@@ -203,4 +201,2 @@
 
-    setState({ mergedConfig: mergedConfig, activeIndex: activeIndex });
-
     function loop() {
@@ -222,2 +218,4 @@ var _this = this;
                       case 0:
+                        setState({ mergedConfig: mergedConfig, activeIndex: activeIndex });
+
                         option = getOption(mergedConfig, activeIndex);
@@ -229,3 +227,3 @@
                         _option$series$ = option.series[0], activeTimeGap = _option$series$.activeTimeGap, data = _option$series$.data;
-                        _context.next = 5;
+                        _context.next = 6;
                         return new Promise(function (resolve) {
@@ -235,3 +233,3 @@ return setTimeout(resolve, activeTimeGap);
 
-                      case 5:
+                      case 6:
 
@@ -244,6 +242,2 @@ activeIndex += 1;
 
-                        setState(function (state) {
-                          return _extends({}, state, { activeIndex: activeIndex });
-                        });
-
                       case 8:
@@ -273,9 +267,3 @@ case 'end':
 
-    var it = loop();
-
-    co(it);
-
-    return function () {
-      return it.return();
-    };
+    return co(loop);
   }, [config]);
@@ -294,3 +282,3 @@
       { className: 'active-ring-info' },
-      React.createElement(DvDigitalFlop, { config: digitalFlop }),
+      React.createElement(DigitalFlop, { config: digitalFlop }),
       React.createElement(
@@ -297,0 +285,0 @@ 'div',

es/borderBox2/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox3/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox4/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox5/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox6/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox7/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox8/index.js

 import React, { useState, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { s as slicedToArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { s as slicedToArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/borderBox9/index.js

 import React, { useState, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { s as slicedToArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { s as slicedToArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/capsuleChart/index.js

 import React, { useState, useEffect, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { s as slicedToArray, t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
+import { s as slicedToArray, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -7,0 +7,0 @@ var css = ".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n";

es/charts/index.js

 import React, { useRef, useEffect, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import '../index-23816ac9.js';
-import '../index-8b5c3ecc.js';
-import '../index-207528fb.js';
-import { C as Charts$1 } from '../index-9fee2098.js';
+import '../index-a9c8fb56.js';
+import '../index-6660d106.js';
+import '../index-43e58b64.js';
+import { C as Charts$1 } from '../index-fbf886e8.js';
 
@@ -12,0 +12,0 @@ var css = ".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n";

es/conicalColumnChart/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { _ as _extends } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { _ as _extends } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -9,0 +9,0 @@ var css = ".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n";

es/decoration1/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration10/index.js

 import React, { useRef, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration2/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration3/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration4/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration5/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import { u as util_7 } from '../index-23816ac9.js';
+import { u as util_7 } from '../index-a9c8fb56.js';
 
@@ -9,0 +9,0 @@ var css = ".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n";

es/decoration6/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { r as randomExtend } from '../index-edb6df58.js';
-import { _ as _extends, t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import { r as randomExtend } from '../index-bedaa24c.js';
+import { _ as _extends, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration8/index.js

 import React, { useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { s as slicedToArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import { s as slicedToArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/decoration9/index.js

 import React, { useRef, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
@@ -7,0 +7,0 @@

es/digitalFlop/index.js

 import React, { useRef, useEffect, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { s as slicedToArray } from '../_babelHelpers-8fa0f879.js';
+import { s as slicedToArray } from '../_babelHelpers-a63acad8.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
-import { C as CRender } from '../index-8b5c3ecc.js';
-import '../index-207528fb.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
+import { C as CRender } from '../index-6660d106.js';
+import '../index-43e58b64.js';
 
@@ -72,24 +72,7 @@ var css = ".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n";
 
-  var mergedConfigRef = useRef(null);
+  function getGraph(mergedConfig) {
+    var animationCurve = mergedConfig.animationCurve,
+        animationFrame = mergedConfig.animationFrame;
 
-  var mountedRef = useRef(true);
 
-  function init() {
-    rendererRef.current = new CRender(domRef.current);
-
-    mergedConfigRef.current = getMergedConfig();
-
-    graphRef.current = getGraph();
-  }
-
-  var getMergedConfig = function getMergedConfig() {
-    return util_2(util_1(defaultConfig, true), config || {});
-  };
-
-  function getGraph() {
-    var _mergedConfigRef$curr = mergedConfigRef.current,
-        animationCurve = _mergedConfigRef$curr.animationCurve,
-        animationFrame = _mergedConfigRef$curr.animationFrame;
-
-
     return rendererRef.current.add({
@@ -99,13 +82,12 @@ name: 'numberText',
       animationFrame: animationFrame,
-      shape: getShape(),
-      style: getStyle()
+      shape: getShape(mergedConfig),
+      style: getStyle(mergedConfig)
     });
   }
 
-  function getShape() {
-    var _mergedConfigRef$curr2 = mergedConfigRef.current,
-        number = _mergedConfigRef$curr2.number,
-        content = _mergedConfigRef$curr2.content,
-        toFixed = _mergedConfigRef$curr2.toFixed,
-        textAlign = _mergedConfigRef$curr2.textAlign;
+  function getShape(_ref2) {
+    var number = _ref2.number,
+        content = _ref2.content,
+        toFixed = _ref2.toFixed,
+        textAlign = _ref2.textAlign;
 
@@ -124,8 +106,6 @@ var _rendererRef$current$ = slicedToArray(rendererRef.current.area, 2),
 
-  function getStyle() {
-    var _mergedConfigRef$curr3 = mergedConfigRef.current,
-        style = _mergedConfigRef$curr3.style,
-        textAlign = _mergedConfigRef$curr3.textAlign;
+  function getStyle(_ref3) {
+    var style = _ref3.style,
+        textAlign = _ref3.textAlign;
 
-
     return util_2(style, {
@@ -137,9 +117,14 @@ textAlign: textAlign,
 
-  useEffect(init, []);
+  useEffect(function () {
+    var mergedConfig = util_2(util_1(defaultConfig, true), config || {});
 
-  function update() {
-    var mergedConfig = mergedConfigRef.current = getMergedConfig();
+    if (!rendererRef.current) {
+      rendererRef.current = new CRender(domRef.current);
+
+      graphRef.current = getGraph(mergedConfig);
+    }
+
     var graph = graphRef.current;
 
-    var shape = getShape();
+    var shape = getShape(mergedConfig);
 
@@ -157,12 +142,4 @@ var cacheNum = graph.shape.number.length;
 
-    graph.animation('style', getStyle(), true);
+    graph.animation('style', getStyle(mergedConfig), true);
     graph.animation('shape', shape);
-  }
-
-  useEffect(function () {
-    !mountedRef.current && update();
-
-    return function () {
-      mountedRef.current = false;
-    };
   }, [config]);
@@ -169,0 +146,0 @@

es/flylineChart/index.js

 import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { r as randomExtend, g as getPointDistance } from '../index-edb6df58.js';
-import { s as slicedToArray, t as toConsumableArray, _ as _extends } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import { r as randomExtend, g as getPointDistance } from '../index-bedaa24c.js';
+import { s as slicedToArray, t as toConsumableArray, _ as _extends } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -9,0 +9,0 @@ var css = ".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n";

es/fullScreenContainer/index.js

@@ -1,6 +0,6 @@
-import React, { useState } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import { s as slicedToArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 
@@ -15,18 +15,6 @@ var css = "#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n";
 
-  var _useAutoResize = useAutoResize(afterAutoResizeMixinInit, function () {
-    return setAppScale(allWidth);
-  }),
+  var _useAutoResize = useAutoResize(),
       domRef = _useAutoResize.domRef;
 
-  var _useState = useState({
-    allWidth: 0,
-    ready: false
-  }),
-      _useState2 = slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      allWidth = _useState2$.allWidth,
-      ready = _useState2$.ready,
-      setState = _useState2[1];
-
-  function afterAutoResizeMixinInit() {
+  useLayoutEffect(function () {
     var _window$screen = window.screen,
@@ -42,11 +30,5 @@ width = _window$screen.width,
 
-    setAppScale(width);
+    domRef.current.style.transform = 'scale(' + document.body.clientWidth / width + ')';
+  });
 
-    setState({ allWidth: width, ready: true });
-  }
-
-  var setAppScale = function setAppScale(allWidth) {
-    return domRef.current.style.transform = 'scale(' + document.body.clientWidth / allWidth + ')';
-  };
-
   return React.createElement(
@@ -60,3 +42,3 @@ 'div',
     },
-    ready && children
+    children
   );
@@ -63,0 +45,0 @@ };

es/index/index.js

 import 'react';
 import '../style-inject.es-4766d9ed.js';
-import '../index-edb6df58.js';
-import '../_babelHelpers-8fa0f879.js';
-import '../autoResize-4f5dcf40.js';
+import '../index-bedaa24c.js';
+import '../_babelHelpers-a63acad8.js';
+import '../autoResize-c1170e96.js';
 export { default as FullScreenContainer } from '../fullScreenContainer/index.js';
@@ -23,3 +23,3 @@ import '../index-183d4825.js';
 export { default as Decoration4 } from '../decoration4/index.js';
-import '../index-23816ac9.js';
+import '../index-a9c8fb56.js';
 export { default as Decoration5 } from '../decoration5/index.js';
@@ -31,5 +31,5 @@ export { default as Decoration6 } from '../decoration6/index.js';
 export { default as Decoration10 } from '../decoration10/index.js';
-import '../index-8b5c3ecc.js';
-import '../index-207528fb.js';
-import '../index-9fee2098.js';
+import '../index-6660d106.js';
+import '../index-43e58b64.js';
+import '../index-fbf886e8.js';
 export { default as Charts } from '../charts/index.js';
@@ -36,0 +36,0 @@ export { default as DigitalFlop } from '../digitalFlop/index.js';

es/percentPond/index.js

 import React, { useRef, useState, useMemo, useEffect } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { s as slicedToArray, _ as _extends } from '../_babelHelpers-8fa0f879.js';
+import { s as slicedToArray } from '../_babelHelpers-a63acad8.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -182,3 +182,3 @@ var css = ".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n";
 
-  function update() {
+  useEffect(function () {
     var _domRef$current = domRef.current,
@@ -189,10 +189,2 @@ width = _domRef$current.clientWidth,
 
-    if (!config) {
-      setState(function (state) {
-        return _extends({}, state, { width: width, height: height });
-      });
-
-      return;
-    }
-
     setState({
@@ -203,6 +195,4 @@ width: width,
     });
-  }
+  }, [config]);
 
-  useEffect(update, [config]);
-
   var classNames = useMemo(function () {
@@ -209,0 +199,0 @@ return classnames('dv-percent-pond', className);

es/scrollBoard/index.js

 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { c as co } from '../index-edb6df58.js';
-import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import { c as co } from '../index-bedaa24c.js';
+import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -232,3 +232,3 @@ var css = ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n";
 
-    Object.assign(stateRef.current, data, { rowsData: rows });
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 });
 
@@ -421,9 +421,3 @@ setState(function (state) {
 
-    var it = loop();
-
-    co(it);
-
-    return function () {
-      return it.return();
-    };
+    return co(loop);
   }, [config, domRef.current]);
@@ -430,0 +424,0 @@

es/scrollRankingBoard/index.js

 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { c as co } from '../index-edb6df58.js';
-import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-8fa0f879.js';
-import { u as useAutoResize } from '../autoResize-4f5dcf40.js';
+import { c as co } from '../index-bedaa24c.js';
+import { s as slicedToArray, _ as _extends, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
+import { u as useAutoResize } from '../autoResize-c1170e96.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
 
@@ -151,3 +151,3 @@ var css = ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n";
 
-    Object.assign(stateRef.current, data, { rowsData: rows });
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 });
 
@@ -304,9 +304,3 @@ setState(function (state) {
 
-    var it = loop();
-
-    co(it);
-
-    return function () {
-      return it.return();
-    };
+    return co(loop);
   }, [config, domRef.current]);
@@ -313,0 +307,0 @@

es/waterLevelPond/index.js

 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { s as styleInject, P as PropTypes } from '../style-inject.es-4766d9ed.js';
-import { s as slicedToArray, t as toConsumableArray, a as asyncToGenerator } from '../_babelHelpers-8fa0f879.js';
+import { c as co } from '../index-bedaa24c.js';
+import { s as slicedToArray, t as toConsumableArray } from '../_babelHelpers-a63acad8.js';
 import { c as classnames } from '../index-183d4825.js';
-import { e as util_2, f as util_1 } from '../index-23816ac9.js';
-import { C as CRender } from '../index-8b5c3ecc.js';
+import { e as util_2, f as util_1 } from '../index-a9c8fb56.js';
+import { C as CRender } from '../index-6660d106.js';
 
@@ -11,2 +12,4 @@ var css = ".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n";
 
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(animationWave);
+
 var defaultConfig = {
@@ -90,96 +93,138 @@ /**
 
-var WaterLevelPond = function WaterLevelPond(_ref7) {
-  var animationWave = function () {
-    var _ref12 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var repeat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      var waves, renderer, animation, w;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              waves = wavesRef.current;
-              renderer = rendererRef.current;
-              animation = animationRef.current;
+function calcSvgBorderGradient(_ref7) {
+  var colors = _ref7.colors;
 
-              if (!animation) {
-                _context.next = 5;
-                break;
-              }
+  var colorNum = colors.length;
 
-              return _context.abrupt('return');
+  var colorOffsetGap = 100 / (colorNum - 1);
 
-            case 5:
+  return colors.map(function (c, i) {
+    return [colorOffsetGap * i, c];
+  });
+}
 
-              animationRef.current = true;
+function calcDetails(_ref8) {
+  var data = _ref8.data,
+      formatter = _ref8.formatter;
 
-              w = renderer.area[0];
+  if (!data.length) {
+    return '';
+  }
 
+  var maxValue = Math.max.apply(Math, toConsumableArray(data));
 
-              waves.forEach(function (graph) {
-                graph.attr('style', { translate: [0, 0] });
+  return formatter.replace('{value}', maxValue);
+}
 
-                graph.animation('style', {
-                  translate: [w, 0]
-                }, true);
-              });
+function getWaveShapes(_ref9, _ref10) {
+  var waveNum = _ref9.waveNum,
+      waveHeight = _ref9.waveHeight,
+      data = _ref9.data;
 
-              _context.next = 10;
-              return renderer.launchAnimation();
+  var _ref11 = slicedToArray(_ref10, 2),
+      w = _ref11[0],
+      h = _ref11[1];
 
-            case 10:
+  var pointsNum = waveNum * 4 + 4;
 
-              animationRef.current = false;
+  var pointXGap = w / waveNum / 2;
 
-              if (renderer.graphs.length) {
-                _context.next = 13;
-                break;
-              }
+  return data.map(function (v) {
+    var points = new Array(pointsNum).fill(0).map(function (foo, j) {
+      var x = w - pointXGap * j;
 
-              return _context.abrupt('return');
+      var startY = (1 - v / 100) * h;
 
-            case 13:
+      var y = j % 2 === 0 ? startY : startY - waveHeight;
 
-              animationWave(repeat + 1);
+      return [x, y];
+    });
 
-            case 14:
-            case 'end':
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    }));
+    points = points.map(function (p) {
+      return mergeOffset(p, [pointXGap * 2, 0]);
+    });
 
-    return function animationWave() {
-      return _ref12.apply(this, arguments);
-    };
-  }();
+    return { points: points };
+  });
+}
 
-  var config = _ref7.config,
-      className = _ref7.className,
-      style = _ref7.style;
+function getWaveStyle(_ref12, area) {
+  var colors = _ref12.colors,
+      waveOpacity = _ref12.waveOpacity;
 
-  var _useState = useState({
-    mergedConfig: {},
+  return {
+    gradientColor: colors,
+    gradientType: 'linear',
+    gradientParams: [0, 0, 0, area[1]],
+    gradientWith: 'fill',
+    opacity: waveOpacity,
+    translate: [0, 0]
+  };
+}
 
-    svgBorderGradient: [],
+function getWave(mergedConfig, renderer) {
+  var area = renderer.area;
+  var shapes = getWaveShapes(mergedConfig, area);
+  var style = getWaveStyle(mergedConfig, area);
 
-    details: ''
-  }),
+  return shapes.map(function (shape) {
+    return renderer.add({
+      name: 'smoothline',
+      animationFrame: 300,
+      shape: shape,
+      style: style,
+      drawed: drawed
+    });
+  });
+}
+
+function animationWave(waves, renderer) {
+  return regeneratorRuntime.wrap(function animationWave$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          waves.forEach(function (graph) {
+            graph.attr('style', { translate: [0, 0] });
+
+            graph.animation('style', {
+              translate: [renderer.area[0], 0]
+            }, true);
+          });
+
+          _context.next = 3;
+          return renderer.launchAnimation();
+
+        case 3:
+        case 'end':
+          return _context.stop();
+      }
+    }
+  }, _marked, this);
+}
+
+var WaterLevelPond = function WaterLevelPond(_ref13) {
+  var config = _ref13.config,
+      className = _ref13.className,
+      style = _ref13.style;
+
+  var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      mergedConfig = _useState2$.mergedConfig,
-      svgBorderGradient = _useState2$.svgBorderGradient,
-      details = _useState2$.details,
-      setState = _useState2[1];
+      renderer = _useState2[0],
+      setRenderer = _useState2[1];
 
   var gradientId = useRef('water-level-pond-' + Date.now()).current;
 
-  var wavesRef = useRef([]);
+  var domRef = useRef(null);
 
-  var rendererRef = useRef(null);
-  var renderer = rendererRef.current;
+  var mergedConfig = useMemo(function () {
+    return util_2(util_1(defaultConfig, true), config);
+  }, [config]);
 
-  var animationRef = useRef(false);
+  var svgBorderGradient = useMemo(function () {
+    return calcSvgBorderGradient(mergedConfig);
+  }, [mergedConfig]);
 
-  var domRef = useRef(null);
+  var details = useMemo(function () {
+    return calcDetails(mergedConfig);
+  }, [mergedConfig]);
 
@@ -197,3 +242,3 @@ var radius = useMemo(function () {
     return '0';
-  }, [mergedConfig.shape]);
+  }, [mergedConfig]);
 
@@ -204,133 +249,63 @@ var shape = useMemo(function () {
 
-    return !shape ? 'rect' : shape;
-  }, [mergedConfig.shape]);
+    return shape || 'rect';
+  }, [mergedConfig]);
 
-  function init() {
-    rendererRef.current = new CRender(domRef.current);
+  useEffect(function () {
+    var _marked2 = /*#__PURE__*/regeneratorRuntime.mark(loop);
 
-    if (!config) return;
+    var innerRenderer = renderer;
 
-    calcData();
-  }
+    if (!renderer) {
+      innerRenderer = new CRender(domRef.current);
 
-  function calcData() {
-    var mergedConfig = util_2(util_1(defaultConfig, true), config);
+      setRenderer(innerRenderer);
+    }
 
-    var svgBorderGradient = calcSvgBorderGradient(mergedConfig);
+    function loop() {
+      var wave;
+      return regeneratorRuntime.wrap(function loop$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return new Promise(function (resolve) {
+                return setTimeout(resolve, 30);
+              });
 
-    var details = calcDetails(mergedConfig);
+            case 2:
+              wave = getWave(mergedConfig, innerRenderer);
 
-    setState({ mergedConfig: mergedConfig, svgBorderGradient: svgBorderGradient, details: details });
+            case 3:
 
-    addWave(mergedConfig);
+              return _context2.delegateYield(animationWave(wave, innerRenderer), 't0', 5);
 
-    animationWave();
-  }
+            case 5:
+              if (innerRenderer.graphs.length) {
+                _context2.next = 7;
+                break;
+              }
 
-  function calcSvgBorderGradient(_ref8) {
-    var colors = _ref8.colors;
+              return _context2.abrupt('return');
 
-    var colorNum = colors.length;
+            case 7:
+              _context2.next = 3;
+              break;
 
-    var colorOffsetGap = 100 / (colorNum - 1);
-
-    return colors.map(function (c, i) {
-      return [colorOffsetGap * i, c];
-    });
-  }
-
-  function calcDetails(_ref9) {
-    var data = _ref9.data,
-        formatter = _ref9.formatter;
-
-    if (!data.length) {
-      return '';
+            case 9:
+            case 'end':
+              return _context2.stop();
+          }
+        }
+      }, _marked2, this);
     }
 
-    var maxValue = Math.max.apply(Math, toConsumableArray(data));
+    var undescribe = co(loop);
 
-    return formatter.replace('{value}', maxValue);
-  }
-
-  function addWave(mergedConfig) {
-    var shapes = getWaveShapes(mergedConfig);
-    var style = getWaveStyle(mergedConfig);
-
-    wavesRef.current = shapes.map(function (shape) {
-      return rendererRef.current.add({
-        name: 'smoothline',
-        animationFrame: 300,
-        shape: shape,
-        style: style,
-        drawed: drawed
-      });
-    });
-  }
-
-  function getWaveShapes(_ref10) {
-    var waveNum = _ref10.waveNum,
-        waveHeight = _ref10.waveHeight,
-        data = _ref10.data;
-
-    var _rendererRef$current$ = slicedToArray(rendererRef.current.area, 2),
-        w = _rendererRef$current$[0],
-        h = _rendererRef$current$[1];
-
-    var pointsNum = waveNum * 4 + 4;
-
-    var pointXGap = w / waveNum / 2;
-
-    return data.map(function (v) {
-      var points = new Array(pointsNum).fill(0).map(function (foo, j) {
-        var x = w - pointXGap * j;
-
-        var startY = (1 - v / 100) * h;
-
-        var y = j % 2 === 0 ? startY : startY - waveHeight;
-
-        return [x, y];
-      });
-
-      points = points.map(function (p) {
-        return mergeOffset(p, [pointXGap * 2, 0]);
-      });
-
-      return { points: points };
-    });
-  }
-
-  function getWaveStyle(_ref11) {
-    var colors = _ref11.colors,
-        waveOpacity = _ref11.waveOpacity;
-
-    var h = rendererRef.current.area[1];
-
-    return {
-      gradientColor: colors,
-      gradientType: 'linear',
-      gradientParams: [0, 0, 0, h],
-      gradientWith: 'fill',
-      opacity: waveOpacity,
-      translate: [0, 0]
-    };
-  }
-
-  useEffect(function () {
-    init();
-
     return function () {
-      rendererRef.current.delAllGraph();
+      innerRenderer.delAllGraph();
 
-      wavesRef.current = [];
+      undescribe();
     };
-  }, []);
+  }, [mergedConfig]);
 
-  useEffect(function () {
-    rendererRef.current.delAllGraph();
-
-    wavesRef.current = [];
-
-    setTimeout(calcData, 0);
-  }, [config]);
-
   var classNames = useMemo(function () {
@@ -337,0 +312,0 @@ return classnames('dv-water-pond-level', className);

lib/activeRingChart/index.js

@@ -8,9 +8,9 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var index = require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
-require('../index-5059a5cd.js');
-require('../index-bd34d708.js');
-var index$4 = require('../index-9fc1d209.js');
+var index$2 = require('../index-c70d5130.js');
+require('../index-e0c88684.js');
+require('../index-7713ac51.js');
+var index$4 = require('../index-256027a9.js');
 var digitalFlop = require('../digitalFlop/index.js');
@@ -180,3 +180,3 @@
 
-    option = _babelHelpers._extends({}, option, {
+    return _babelHelpers._extends({}, option, {
       series: option.series.reduce(function (prev, serie, index) {
@@ -192,4 +192,2 @@ return index !== 0 ? [].concat(_babelHelpers.toConsumableArray(prev), [serie]) : [].concat(_babelHelpers.toConsumableArray(prev), [_babelHelpers._extends({}, serie, {
     });
-
-    return option;
   }
@@ -209,4 +207,2 @@
 
-    setState({ mergedConfig: mergedConfig, activeIndex: activeIndex });
-
     function loop() {
@@ -228,2 +224,4 @@ var _this = this;
                       case 0:
+                        setState({ mergedConfig: mergedConfig, activeIndex: activeIndex });
+
                         option = getOption(mergedConfig, activeIndex);
@@ -235,3 +233,3 @@
                         _option$series$ = option.series[0], activeTimeGap = _option$series$.activeTimeGap, data = _option$series$.data;
-                        _context.next = 5;
+                        _context.next = 6;
                         return new Promise(function (resolve) {
@@ -241,3 +239,3 @@ return setTimeout(resolve, activeTimeGap);
 
-                      case 5:
+                      case 6:
 
@@ -250,6 +248,2 @@ activeIndex += 1;
 
-                        setState(function (state) {
-                          return _babelHelpers._extends({}, state, { activeIndex: activeIndex });
-                        });
-
                       case 8:
@@ -279,9 +273,3 @@ case 'end':
 
-    var it = loop();
-
-    index.co(it);
-
-    return function () {
-      return it.return();
-    };
+    return index.co(loop);
   }, [config]);
@@ -288,0 +276,0 @@

lib/borderBox2/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox3/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox4/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox5/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox6/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox7/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox8/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/borderBox9/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/capsuleChart/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -13,0 +13,0 @@ var css = ".dv-capsule-chart {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 10px;\n  color: #fff;\n}\n.dv-capsule-chart .label-column {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding-right: 10px;\n  text-align: right;\n  font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n  height: 20px;\n  line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n  box-shadow: 0 0 3px #999;\n  height: 10px;\n  margin: 5px 0px;\n  border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n  height: 8px;\n  margin-top: 1px;\n  border-radius: 5px;\n  transition: all 0.3s;\n}\n.dv-capsule-chart .unit-label {\n  height: 20px;\n  font-size: 12px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.dv-capsule-chart .unit-text {\n  text-align: right;\n  display: flex;\n  align-items: flex-end;\n  font-size: 12px;\n  line-height: 20px;\n  margin-left: 10px;\n}\n";

lib/charts/index.js

@@ -8,10 +8,10 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-require('../index-18149766.js');
-require('../index-5059a5cd.js');
-require('../index-bd34d708.js');
-var index$4 = require('../index-9fc1d209.js');
+require('../index-c70d5130.js');
+require('../index-e0c88684.js');
+require('../index-7713ac51.js');
+var index$4 = require('../index-256027a9.js');
 
@@ -18,0 +18,0 @@ var css = ".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n";

lib/conicalColumnChart/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -15,0 +15,0 @@ var css = ".dv-conical-column-chart {\n  width: 100%;\n  height: 100%;\n}\n.dv-conical-column-chart text {\n  text-anchor: middle;\n}\n";

lib/decoration1/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration10/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration2/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration3/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration4/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration5/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -15,0 +15,0 @@ var css = ".dv-decoration-5 {\n  width: 100%;\n  height: 100%;\n}\n";

lib/decoration6/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var index = require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration8/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/decoration9/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
@@ -13,0 +13,0 @@

lib/digitalFlop/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
-var index$3 = require('../index-5059a5cd.js');
-require('../index-bd34d708.js');
+var index$2 = require('../index-c70d5130.js');
+var index$3 = require('../index-e0c88684.js');
+require('../index-7713ac51.js');
 
@@ -78,24 +78,7 @@ var css = ".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n";
 
-  var mergedConfigRef = React.useRef(null);
+  function getGraph(mergedConfig) {
+    var animationCurve = mergedConfig.animationCurve,
+        animationFrame = mergedConfig.animationFrame;
 
-  var mountedRef = React.useRef(true);
 
-  function init() {
-    rendererRef.current = new index$3.CRender(domRef.current);
-
-    mergedConfigRef.current = getMergedConfig();
-
-    graphRef.current = getGraph();
-  }
-
-  var getMergedConfig = function getMergedConfig() {
-    return index$2.util_2(index$2.util_1(defaultConfig, true), config || {});
-  };
-
-  function getGraph() {
-    var _mergedConfigRef$curr = mergedConfigRef.current,
-        animationCurve = _mergedConfigRef$curr.animationCurve,
-        animationFrame = _mergedConfigRef$curr.animationFrame;
-
-
     return rendererRef.current.add({
@@ -105,13 +88,12 @@ name: 'numberText',
       animationFrame: animationFrame,
-      shape: getShape(),
-      style: getStyle()
+      shape: getShape(mergedConfig),
+      style: getStyle(mergedConfig)
     });
   }
 
-  function getShape() {
-    var _mergedConfigRef$curr2 = mergedConfigRef.current,
-        number = _mergedConfigRef$curr2.number,
-        content = _mergedConfigRef$curr2.content,
-        toFixed = _mergedConfigRef$curr2.toFixed,
-        textAlign = _mergedConfigRef$curr2.textAlign;
+  function getShape(_ref2) {
+    var number = _ref2.number,
+        content = _ref2.content,
+        toFixed = _ref2.toFixed,
+        textAlign = _ref2.textAlign;
 
@@ -130,8 +112,6 @@ var _rendererRef$current$ = _babelHelpers.slicedToArray(rendererRef.current.area, 2),
 
-  function getStyle() {
-    var _mergedConfigRef$curr3 = mergedConfigRef.current,
-        style = _mergedConfigRef$curr3.style,
-        textAlign = _mergedConfigRef$curr3.textAlign;
+  function getStyle(_ref3) {
+    var style = _ref3.style,
+        textAlign = _ref3.textAlign;
 
-
     return index$2.util_2(style, {
@@ -143,9 +123,14 @@ textAlign: textAlign,
 
-  React.useEffect(init, []);
+  React.useEffect(function () {
+    var mergedConfig = index$2.util_2(index$2.util_1(defaultConfig, true), config || {});
 
-  function update() {
-    var mergedConfig = mergedConfigRef.current = getMergedConfig();
+    if (!rendererRef.current) {
+      rendererRef.current = new index$3.CRender(domRef.current);
+
+      graphRef.current = getGraph(mergedConfig);
+    }
+
     var graph = graphRef.current;
 
-    var shape = getShape();
+    var shape = getShape(mergedConfig);
 
@@ -163,12 +148,4 @@ var cacheNum = graph.shape.number.length;
 
-    graph.animation('style', getStyle(), true);
+    graph.animation('style', getStyle(mergedConfig), true);
     graph.animation('shape', shape);
-  }
-
-  React.useEffect(function () {
-    !mountedRef.current && update();
-
-    return function () {
-      mountedRef.current = false;
-    };
   }, [config]);
@@ -175,0 +152,0 @@

lib/flylineChart/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var index = require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -15,0 +15,0 @@ var css = ".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n";

lib/fullScreenContainer/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 
@@ -21,18 +21,6 @@ var css = "#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n";
 
-  var _useAutoResize = autoResize.useAutoResize(afterAutoResizeMixinInit, function () {
-    return setAppScale(allWidth);
-  }),
+  var _useAutoResize = autoResize.useAutoResize(),
       domRef = _useAutoResize.domRef;
 
-  var _useState = React.useState({
-    allWidth: 0,
-    ready: false
-  }),
-      _useState2 = _babelHelpers.slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      allWidth = _useState2$.allWidth,
-      ready = _useState2$.ready,
-      setState = _useState2[1];
-
-  function afterAutoResizeMixinInit() {
+  React.useLayoutEffect(function () {
     var _window$screen = window.screen,
@@ -48,11 +36,5 @@ width = _window$screen.width,
 
-    setAppScale(width);
+    domRef.current.style.transform = 'scale(' + document.body.clientWidth / width + ')';
+  });
 
-    setState({ allWidth: width, ready: true });
-  }
-
-  var setAppScale = function setAppScale(allWidth) {
-    return domRef.current.style.transform = 'scale(' + document.body.clientWidth / allWidth + ')';
-  };
-
   return React__default.createElement(
@@ -66,3 +48,3 @@ 'div',
     },
-    ready && children
+    children
   );
@@ -69,0 +51,0 @@ };

lib/index/index.js

@@ -7,5 +7,5 @@ 'use strict';
 require('../style-inject.es-df9d6d42.js');
-require('../index-d2e18b0b.js');
-require('../_babelHelpers-9aeb3ceb.js');
-require('../autoResize-5f6fa80f.js');
+require('../index-3d59c757.js');
+require('../_babelHelpers-1c35d3ad.js');
+require('../autoResize-8c1abbb9.js');
 var fullScreenContainer = require('../fullScreenContainer/index.js');
@@ -28,3 +28,3 @@ require('../index-6753d2bc.js');
 var decoration4 = require('../decoration4/index.js');
-require('../index-18149766.js');
+require('../index-c70d5130.js');
 var decoration5 = require('../decoration5/index.js');
@@ -36,5 +36,5 @@ var decoration6 = require('../decoration6/index.js');
 var decoration10 = require('../decoration10/index.js');
-require('../index-5059a5cd.js');
-require('../index-bd34d708.js');
-require('../index-9fc1d209.js');
+require('../index-e0c88684.js');
+require('../index-7713ac51.js');
+require('../index-256027a9.js');
 var charts = require('../charts/index.js');
@@ -41,0 +41,0 @@ var digitalFlop = require('../digitalFlop/index.js');

lib/percentPond/index.js

@@ -8,5 +8,5 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -188,3 +188,3 @@ var css = ".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n";
 
-  function update() {
+  React.useEffect(function () {
     var _domRef$current = domRef.current,
@@ -195,10 +195,2 @@ width = _domRef$current.clientWidth,
 
-    if (!config) {
-      setState(function (state) {
-        return _babelHelpers._extends({}, state, { width: width, height: height });
-      });
-
-      return;
-    }
-
     setState({
@@ -209,6 +201,4 @@ width: width,
     });
-  }
+  }, [config]);
 
-  React.useEffect(update, [config]);
-
   var classNames = React.useMemo(function () {
@@ -215,0 +205,0 @@ return index$1.classnames('dv-percent-pond', className);

lib/scrollBoard/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var index = require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -238,3 +238,3 @@ var css = ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n";
 
-    Object.assign(stateRef.current, data, { rowsData: rows });
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 });
 
@@ -427,9 +427,3 @@ setState(function (state) {
 
-    var it = loop();
-
-    index.co(it);
-
-    return function () {
-      return it.return();
-    };
+    return index.co(loop);
   }, [config, domRef.current]);
@@ -436,0 +430,0 @@

lib/scrollRankingBoard/index.js

@@ -8,7 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var index = require('../index-d2e18b0b.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
-var autoResize = require('../autoResize-5f6fa80f.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
+var autoResize = require('../autoResize-8c1abbb9.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
+var index$2 = require('../index-c70d5130.js');
 
@@ -157,3 +157,3 @@ var css = ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n";
 
-    Object.assign(stateRef.current, data, { rowsData: rows });
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 });
 
@@ -310,9 +310,3 @@ setState(function (state) {
 
-    var it = loop();
-
-    index.co(it);
-
-    return function () {
-      return it.return();
-    };
+    return index.co(loop);
   }, [config, domRef.current]);
@@ -319,0 +313,0 @@

lib/waterLevelPond/index.js

@@ -8,6 +8,7 @@ 'use strict';
 var styleInject_es = require('../style-inject.es-df9d6d42.js');
-var _babelHelpers = require('../_babelHelpers-9aeb3ceb.js');
+var index = require('../index-3d59c757.js');
+var _babelHelpers = require('../_babelHelpers-1c35d3ad.js');
 var index$1 = require('../index-6753d2bc.js');
-var index$2 = require('../index-18149766.js');
-var index$3 = require('../index-5059a5cd.js');
+var index$2 = require('../index-c70d5130.js');
+var index$3 = require('../index-e0c88684.js');
 
@@ -17,2 +18,4 @@ var css = ".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n";
 
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(animationWave);
+
 var defaultConfig = {
@@ -96,96 +99,138 @@ /**
 
-var WaterLevelPond = function WaterLevelPond(_ref7) {
-  var animationWave = function () {
-    var _ref12 = _babelHelpers.asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var repeat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      var waves, renderer, animation, w;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              waves = wavesRef.current;
-              renderer = rendererRef.current;
-              animation = animationRef.current;
+function calcSvgBorderGradient(_ref7) {
+  var colors = _ref7.colors;
 
-              if (!animation) {
-                _context.next = 5;
-                break;
-              }
+  var colorNum = colors.length;
 
-              return _context.abrupt('return');
+  var colorOffsetGap = 100 / (colorNum - 1);
 
-            case 5:
+  return colors.map(function (c, i) {
+    return [colorOffsetGap * i, c];
+  });
+}
 
-              animationRef.current = true;
+function calcDetails(_ref8) {
+  var data = _ref8.data,
+      formatter = _ref8.formatter;
 
-              w = renderer.area[0];
+  if (!data.length) {
+    return '';
+  }
 
+  var maxValue = Math.max.apply(Math, _babelHelpers.toConsumableArray(data));
 
-              waves.forEach(function (graph) {
-                graph.attr('style', { translate: [0, 0] });
+  return formatter.replace('{value}', maxValue);
+}
 
-                graph.animation('style', {
-                  translate: [w, 0]
-                }, true);
-              });
+function getWaveShapes(_ref9, _ref10) {
+  var waveNum = _ref9.waveNum,
+      waveHeight = _ref9.waveHeight,
+      data = _ref9.data;
 
-              _context.next = 10;
-              return renderer.launchAnimation();
+  var _ref11 = _babelHelpers.slicedToArray(_ref10, 2),
+      w = _ref11[0],
+      h = _ref11[1];
 
-            case 10:
+  var pointsNum = waveNum * 4 + 4;
 
-              animationRef.current = false;
+  var pointXGap = w / waveNum / 2;
 
-              if (renderer.graphs.length) {
-                _context.next = 13;
-                break;
-              }
+  return data.map(function (v) {
+    var points = new Array(pointsNum).fill(0).map(function (foo, j) {
+      var x = w - pointXGap * j;
 
-              return _context.abrupt('return');
+      var startY = (1 - v / 100) * h;
 
-            case 13:
+      var y = j % 2 === 0 ? startY : startY - waveHeight;
 
-              animationWave(repeat + 1);
+      return [x, y];
+    });
 
-            case 14:
-            case 'end':
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    }));
+    points = points.map(function (p) {
+      return mergeOffset(p, [pointXGap * 2, 0]);
+    });
 
-    return function animationWave() {
-      return _ref12.apply(this, arguments);
-    };
-  }();
+    return { points: points };
+  });
+}
 
-  var config = _ref7.config,
-      className = _ref7.className,
-      style = _ref7.style;
+function getWaveStyle(_ref12, area) {
+  var colors = _ref12.colors,
+      waveOpacity = _ref12.waveOpacity;
 
-  var _useState = React.useState({
-    mergedConfig: {},
+  return {
+    gradientColor: colors,
+    gradientType: 'linear',
+    gradientParams: [0, 0, 0, area[1]],
+    gradientWith: 'fill',
+    opacity: waveOpacity,
+    translate: [0, 0]
+  };
+}
 
-    svgBorderGradient: [],
+function getWave(mergedConfig, renderer) {
+  var area = renderer.area;
+  var shapes = getWaveShapes(mergedConfig, area);
+  var style = getWaveStyle(mergedConfig, area);
 
-    details: ''
-  }),
+  return shapes.map(function (shape) {
+    return renderer.add({
+      name: 'smoothline',
+      animationFrame: 300,
+      shape: shape,
+      style: style,
+      drawed: drawed
+    });
+  });
+}
+
+function animationWave(waves, renderer) {
+  return regeneratorRuntime.wrap(function animationWave$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          waves.forEach(function (graph) {
+            graph.attr('style', { translate: [0, 0] });
+
+            graph.animation('style', {
+              translate: [renderer.area[0], 0]
+            }, true);
+          });
+
+          _context.next = 3;
+          return renderer.launchAnimation();
+
+        case 3:
+        case 'end':
+          return _context.stop();
+      }
+    }
+  }, _marked, this);
+}
+
+var WaterLevelPond = function WaterLevelPond(_ref13) {
+  var config = _ref13.config,
+      className = _ref13.className,
+      style = _ref13.style;
+
+  var _useState = React.useState(null),
       _useState2 = _babelHelpers.slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      mergedConfig = _useState2$.mergedConfig,
-      svgBorderGradient = _useState2$.svgBorderGradient,
-      details = _useState2$.details,
-      setState = _useState2[1];
+      renderer = _useState2[0],
+      setRenderer = _useState2[1];
 
   var gradientId = React.useRef('water-level-pond-' + Date.now()).current;
 
-  var wavesRef = React.useRef([]);
+  var domRef = React.useRef(null);
 
-  var rendererRef = React.useRef(null);
-  var renderer = rendererRef.current;
+  var mergedConfig = React.useMemo(function () {
+    return index$2.util_2(index$2.util_1(defaultConfig, true), config);
+  }, [config]);
 
-  var animationRef = React.useRef(false);
+  var svgBorderGradient = React.useMemo(function () {
+    return calcSvgBorderGradient(mergedConfig);
+  }, [mergedConfig]);
 
-  var domRef = React.useRef(null);
+  var details = React.useMemo(function () {
+    return calcDetails(mergedConfig);
+  }, [mergedConfig]);
 
@@ -203,3 +248,3 @@ var radius = React.useMemo(function () {
     return '0';
-  }, [mergedConfig.shape]);
+  }, [mergedConfig]);
 
@@ -210,133 +255,63 @@ var shape = React.useMemo(function () {
 
-    return !shape ? 'rect' : shape;
-  }, [mergedConfig.shape]);
+    return shape || 'rect';
+  }, [mergedConfig]);
 
-  function init() {
-    rendererRef.current = new index$3.CRender(domRef.current);
+  React.useEffect(function () {
+    var _marked2 = /*#__PURE__*/regeneratorRuntime.mark(loop);
 
-    if (!config) return;
+    var innerRenderer = renderer;
 
-    calcData();
-  }
+    if (!renderer) {
+      innerRenderer = new index$3.CRender(domRef.current);
 
-  function calcData() {
-    var mergedConfig = index$2.util_2(index$2.util_1(defaultConfig, true), config);
+      setRenderer(innerRenderer);
+    }
 
-    var svgBorderGradient = calcSvgBorderGradient(mergedConfig);
+    function loop() {
+      var wave;
+      return regeneratorRuntime.wrap(function loop$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return new Promise(function (resolve) {
+                return setTimeout(resolve, 30);
+              });
 
-    var details = calcDetails(mergedConfig);
+            case 2:
+              wave = getWave(mergedConfig, innerRenderer);
 
-    setState({ mergedConfig: mergedConfig, svgBorderGradient: svgBorderGradient, details: details });
+            case 3:
 
-    addWave(mergedConfig);
+              return _context2.delegateYield(animationWave(wave, innerRenderer), 't0', 5);
 
-    animationWave();
-  }
+            case 5:
+              if (innerRenderer.graphs.length) {
+                _context2.next = 7;
+                break;
+              }
 
-  function calcSvgBorderGradient(_ref8) {
-    var colors = _ref8.colors;
+              return _context2.abrupt('return');
 
-    var colorNum = colors.length;
+            case 7:
+              _context2.next = 3;
+              break;
 
-    var colorOffsetGap = 100 / (colorNum - 1);
-
-    return colors.map(function (c, i) {
-      return [colorOffsetGap * i, c];
-    });
-  }
-
-  function calcDetails(_ref9) {
-    var data = _ref9.data,
-        formatter = _ref9.formatter;
-
-    if (!data.length) {
-      return '';
+            case 9:
+            case 'end':
+              return _context2.stop();
+          }
+        }
+      }, _marked2, this);
     }
 
-    var maxValue = Math.max.apply(Math, _babelHelpers.toConsumableArray(data));
+    var undescribe = index.co(loop);
 
-    return formatter.replace('{value}', maxValue);
-  }
-
-  function addWave(mergedConfig) {
-    var shapes = getWaveShapes(mergedConfig);
-    var style = getWaveStyle(mergedConfig);
-
-    wavesRef.current = shapes.map(function (shape) {
-      return rendererRef.current.add({
-        name: 'smoothline',
-        animationFrame: 300,
-        shape: shape,
-        style: style,
-        drawed: drawed
-      });
-    });
-  }
-
-  function getWaveShapes(_ref10) {
-    var waveNum = _ref10.waveNum,
-        waveHeight = _ref10.waveHeight,
-        data = _ref10.data;
-
-    var _rendererRef$current$ = _babelHelpers.slicedToArray(rendererRef.current.area, 2),
-        w = _rendererRef$current$[0],
-        h = _rendererRef$current$[1];
-
-    var pointsNum = waveNum * 4 + 4;
-
-    var pointXGap = w / waveNum / 2;
-
-    return data.map(function (v) {
-      var points = new Array(pointsNum).fill(0).map(function (foo, j) {
-        var x = w - pointXGap * j;
-
-        var startY = (1 - v / 100) * h;
-
-        var y = j % 2 === 0 ? startY : startY - waveHeight;
-
-        return [x, y];
-      });
-
-      points = points.map(function (p) {
-        return mergeOffset(p, [pointXGap * 2, 0]);
-      });
-
-      return { points: points };
-    });
-  }
-
-  function getWaveStyle(_ref11) {
-    var colors = _ref11.colors,
-        waveOpacity = _ref11.waveOpacity;
-
-    var h = rendererRef.current.area[1];
-
-    return {
-      gradientColor: colors,
-      gradientType: 'linear',
-      gradientParams: [0, 0, 0, h],
-      gradientWith: 'fill',
-      opacity: waveOpacity,
-      translate: [0, 0]
-    };
-  }
-
-  React.useEffect(function () {
-    init();
-
     return function () {
-      rendererRef.current.delAllGraph();
+      innerRenderer.delAllGraph();
 
-      wavesRef.current = [];
+      undescribe();
     };
-  }, []);
+  }, [mergedConfig]);
 
-  React.useEffect(function () {
-    rendererRef.current.delAllGraph();
-
-    wavesRef.current = [];
-
-    setTimeout(calcData, 0);
-  }, [config]);
-
   var classNames = React.useMemo(function () {
@@ -343,0 +318,0 @@ return index$1.classnames('dv-water-pond-level', className);

package.json

 {
   "name": "@jiaminghi/data-view-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React Large screen data display component library",
-  "author": "Duan Yu",
+  "author": "Duan Yu <[e-mail]>",
   "license": "MIT",
@@ -10,2 +10,3 @@ "repository": "DataV-Team/data-view-react",
   "module": "es/index/index.js",
+  "unpkg": "umd/datav.js",
   "engines": {
@@ -12,0 +13,0 @@ "node": ">=8",

README.md

@@ -6,20 +6,20 @@ [ENGLISH](./README_EN.md)
     <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
-      <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
+      <img src="https://img.shields.io/github/license/DataV-Team/datav-react.svg" alt="LICENSE" />
     </a>
     <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
-      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
+      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view-react.svg" alt="LICENSE" />
     </a>
 </p>
 
-## DataV是干什么的?
+## DataV-React 是干什么的?
 
-* DataV是一个基于**Vue**的数据可视化组件库
-* 提供用于提升页面视觉效果的**SVG**边框和装饰
-* 提供常用的**图表**如折线图等
-* 飞线图/轮播表等其他组件
+- DataV-React 是一个基于**React**的数据可视化组件库(当然也有[Vue 版本](http://datav.jiaminghi.com))
+- 提供用于提升页面视觉效果的**SVG**边框和装饰
+- 提供常用的**图表**如折线图等
+- 飞线图/轮播表等其他组件
 
-### npm安装
+### npm 安装
 
 ```shell
-$ npm install @jiaminghi/data-view
+$ npm install @jiaminghi/data-view-react
 ```
@@ -30,38 +30,29 @@
 ```js
-import Vue from 'vue'
-import DataV from '@jiaminghi/data-view'
+import datav from "@jiaminghi/data-view-react"
 
-Vue.use(DataV)
+datav.BorderBox1
 
+// 或者
+import { BorderBox1 } from "@jiaminghi/data-view-react"
+
 // 按需引入
-import { borderBox1 } from '@jiaminghi/data-view'
-Vue.use(borderBox1)
+import BorderBox1 from "@jiaminghi/data-view-react/es/borderBox1"
 ```
 
-详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+详细文档及示例请移步[HomePage](http://datav.react.jiaminghi.com).
 
-### UMD版
+### UMD 版
 
-`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。
+`UMD`版可直接使用`script`标签引入，引入后通过**datav**命名空间使用对应的组件，引入`data-view-react`前请确保已引入`react 和 react-dom`。
 
-[UMD版使用示例](./umdExample.html)
+[UMD 版使用示例](./umdExample.html)
 
-### React版本
-
-React版本已在开发中，敬请期待
-
-### 调研
-
-关于React版本组件库及反馈请移步[问卷调查](https://www.wjx.cn/jq/45326197.aspx)
-
-![问卷调查](./questionnaire.jpg)
-
 ### TODO
 
-* **飞线图**添加多中心点及反向飞线功能
-* **边框**及**装饰**添加颜色及其他必要配置项，增强可配置性及灵活性.
+- **飞线图**添加多中心点及反向飞线功能
+- **边框**及**装饰**添加颜色及其他必要配置项，增强可配置性及灵活性.
 
 ### 致谢
 
-组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/jiaming743/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
+组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有 BUG 可及时提交[issue](https://github.com/DataV-Team/DataV-React/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
 
@@ -74,14 +65,14 @@ ### 反馈
 
-Demo页面使用了全屏组件，请F11全屏后查看。
+Demo 页面使用了全屏组件，请 F11 全屏后查看。
 
-* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)
+- [施工养护综合数据](http://datav.react.jiaminghi.com/demo/construction-data/index.html)
 
 ![construction-data](./demoImg/construction-data.jpg)
 
-* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+- [机电运维管理台](http://datav.react.jiaminghi.com/demo/manage-desk/index.html)
 
 ![manage-desk](./demoImg/manage-desk.jpg)
 
-* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+- [机电设备电子档案](http://datav.react.jiaminghi.com/demo/electronic-file/index.html)
 
 ![electronic-file](./demoImg/electronic-file.jpg)

src/components/activeRingChart/index.js

@@ -9,4 +9,2 @@ import React, { useRef, useState, useEffect, useMemo } from 'react'
 
-import DvDigitalFlop from '../digitalFlop'
-
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
@@ -16,2 +14,4 @@
 
+import DigitalFlop from '../digitalFlop'
+
 import { co } from '../../util'
@@ -164,3 +164,3 @@
 
-    option = {
+    return {
       ...option,
@@ -184,4 +184,2 @@ series: option.series.reduce(
     }
-
-    return option
   }
@@ -199,6 +197,6 @@
 
-    setState({ mergedConfig, activeIndex })
-
     function * loop() {
       while (true) {
+        setState({ mergedConfig, activeIndex })
+
         const option = getOption(mergedConfig, activeIndex)
@@ -217,12 +215,6 @@
         }
-
-        setState(state => ({ ...state, activeIndex }))
       }
     }
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config])
@@ -239,3 +231,3 @@
       <div className='active-ring-info'>
-        <DvDigitalFlop config={digitalFlop} />
+        <DigitalFlop config={digitalFlop} />
         <div className='active-ring-name' style={fontSize}>
@@ -242,0 +234,0 @@ {ringName}

src/components/digitalFlop/index.js

@@ -72,20 +72,5 @@ import React, { useEffect, useRef, useMemo } from 'react'
 
-  const mergedConfigRef = useRef(null)
+  function getGraph(mergedConfig) {
+    const { animationCurve, animationFrame } = mergedConfig
 
-  const mountedRef = useRef(true)
-
-  function init() {
-    rendererRef.current = new CRender(domRef.current)
-
-    mergedConfigRef.current = getMergedConfig()
-
-    graphRef.current = getGraph()
-  }
-
-  const getMergedConfig = () =>
-    deepMerge(deepClone(defaultConfig, true), config || {})
-
-  function getGraph() {
-    const { animationCurve, animationFrame } = mergedConfigRef.current
-
     return rendererRef.current.add({
@@ -95,9 +80,8 @@ name: 'numberText',
       animationFrame,
-      shape: getShape(),
-      style: getStyle()
+      shape: getShape(mergedConfig),
+      style: getStyle(mergedConfig)
     })
   }
 
-  function getShape() {
-    const { number, content, toFixed, textAlign } = mergedConfigRef.current
+  function getShape({ number, content, toFixed, textAlign }) {
     const [w, h] = rendererRef.current.area
@@ -113,5 +97,3 @@
 
-  function getStyle() {
-    const { style, textAlign } = mergedConfigRef.current
-
+  function getStyle({ style, textAlign }) {
     return deepMerge(style, {
@@ -123,9 +105,14 @@ textAlign,
 
-  useEffect(init, [])
+  useEffect(() => {
+    const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
 
-  function update() {
-    const mergedConfig = (mergedConfigRef.current = getMergedConfig())
+    if (!rendererRef.current) {
+      rendererRef.current = new CRender(domRef.current)
+
+      graphRef.current = getGraph(mergedConfig)
+    }
+
     const graph = graphRef.current
 
-    const shape = getShape()
+    const shape = getShape(mergedConfig)
 
@@ -141,12 +128,4 @@ const cacheNum = graph.shape.number.length
 
-    graph.animation('style', getStyle(), true)
+    graph.animation('style', getStyle(mergedConfig), true)
     graph.animation('shape', shape)
-  }
-
-  useEffect(() => {
-    !mountedRef.current && update()
-
-    return () => {
-      mountedRef.current = false
-    }
   }, [config])
@@ -153,0 +132,0 @@

src/components/fullScreenContainer/index.js

@@ -1,2 +0,2 @@
-import React, { useState } from 'react'
+import React, { useLayoutEffect } from 'react'
 
@@ -10,12 +10,5 @@ import PropTypes from 'prop-types'
 const FullScreenContainer = ({ children, className, style }) => {
-  const { domRef } = useAutoResize(afterAutoResizeMixinInit, () =>
-    setAppScale(allWidth)
-  )
+  const { domRef } = useAutoResize()
 
-  const [{ allWidth, ready }, setState] = useState({
-    allWidth: 0,
-    ready: false
-  })
-
-  function afterAutoResizeMixinInit() {
+  useLayoutEffect(() => {
     const { width, height } = window.screen
@@ -28,11 +21,6 @@
 
-    setAppScale(width)
+    domRef.current.style.transform = `scale(${document.body.clientWidth /
+      width})`
+  })
 
-    setState({ allWidth: width, ready: true })
-  }
-
-  const setAppScale = allWidth =>
-    (domRef.current.style.transform = `scale(${document.body.clientWidth /
-      allWidth})`)
-
   return (
@@ -45,3 +33,3 @@ <div
     >
-      {ready && children}
+      {children}
     </div>
@@ -48,0 +36,0 @@ )

src/components/percentPond/index.js

@@ -163,11 +163,5 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
 
-  function update() {
+  useEffect(() => {
     const { clientWidth: width, clientHeight: height } = domRef.current
 
-    if (!config) {
-      setState(state => ({ ...state, width, height }))
-
-      return
-    }
-
     setState({
@@ -178,6 +172,4 @@ width,
     })
-  }
+  }, [config])
 
-  useEffect(update, [config])
-
   const classNames = useMemo(() => classnames('dv-percent-pond', className), [
@@ -184,0 +176,0 @@ className

src/components/scrollBoard/index.js

@@ -204,3 +204,3 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
 
-    Object.assign(stateRef.current, data, { rowsData: rows })
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 })
 
@@ -308,7 +308,3 @@ setState(state => ({ ...state, ...data }))
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config, domRef.current])
@@ -315,0 +311,0 @@

src/components/scrollRankingBoard/index.js

@@ -125,3 +125,3 @@ import React, { useEffect, useRef, useState, useMemo } from 'react'
 
-    Object.assign(stateRef.current, data, { rowsData: rows })
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 })
 
@@ -201,7 +201,3 @@ setState(state => ({ ...state, ...data }))
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config, domRef.current])
@@ -208,0 +204,0 @@

src/components/waterLevelPond/index.js

@@ -1,2 +0,2 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react'
+import React, { useEffect, useRef, useMemo, useState } from 'react'
 
@@ -13,2 +13,4 @@ import PropTypes from 'prop-types'
 
+import { co } from '../../util'
+
 import './style.less'
@@ -82,182 +84,151 @@
 
-const WaterLevelPond = ({ config, className, style }) => {
-  const [{ mergedConfig, svgBorderGradient, details }, setState] = useState({
-    mergedConfig: {},
+function calcSvgBorderGradient({ colors }) {
+  const colorNum = colors.length
 
-    svgBorderGradient: [],
+  const colorOffsetGap = 100 / (colorNum - 1)
 
-    details: ''
-  })
+  return colors.map((c, i) => [colorOffsetGap * i, c])
+}
 
-  const gradientId = useRef(`water-level-pond-${Date.now()}`).current
+function calcDetails({ data, formatter }) {
+  if (!data.length) {
+    return ''
+  }
 
-  const wavesRef = useRef([])
+  const maxValue = Math.max(...data)
 
-  const rendererRef = useRef(null)
-  const renderer = rendererRef.current
+  return formatter.replace('{value}', maxValue)
+}
 
-  const animationRef = useRef(false)
+function getWaveShapes({ waveNum, waveHeight, data }, [w, h]) {
+  const pointsNum = waveNum * 4 + 4
 
-  const domRef = useRef(null)
+  const pointXGap = w / waveNum / 2
 
-  const radius = useMemo(() => {
-    const { shape } = mergedConfig
+  return data.map(v => {
+    let points = new Array(pointsNum).fill(0).map((foo, j) => {
+      const x = w - pointXGap * j
 
-    if (shape === 'round') return '50%'
+      const startY = (1 - v / 100) * h
 
-    if (shape === 'rect') return '0'
+      const y = j % 2 === 0 ? startY : startY - waveHeight
 
-    if (shape === 'roundRect') return '10px'
+      return [x, y]
+    })
 
-    return '0'
-  }, [mergedConfig.shape])
+    points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))
 
-  const shape = useMemo(() => {
-    const { shape } = mergedConfig
+    return { points }
+  })
+}
 
-    return !shape ? 'rect' : shape
-  }, [mergedConfig.shape])
-
-  function init() {
-    rendererRef.current = new CRender(domRef.current)
-
-    if (!config) return
-
-    calcData()
+function getWaveStyle({ colors, waveOpacity }, area) {
+  return {
+    gradientColor: colors,
+    gradientType: 'linear',
+    gradientParams: [0, 0, 0, area[1]],
+    gradientWith: 'fill',
+    opacity: waveOpacity,
+    translate: [0, 0]
   }
+}
 
-  function calcData() {
-    const mergedConfig = deepMerge(deepClone(defaultConfig, true), config)
+function getWave(mergedConfig, renderer) {
+  const area = renderer.area
+  const shapes = getWaveShapes(mergedConfig, area)
+  const style = getWaveStyle(mergedConfig, area)
 
-    const svgBorderGradient = calcSvgBorderGradient(mergedConfig)
+  return shapes.map(shape =>
+    renderer.add({
+      name: 'smoothline',
+      animationFrame: 300,
+      shape,
+      style,
+      drawed
+    })
+  )
+}
 
-    const details = calcDetails(mergedConfig)
+function * animationWave(waves, renderer) {
+  waves.forEach(graph => {
+    graph.attr('style', { translate: [0, 0] })
 
-    setState({ mergedConfig, svgBorderGradient, details })
+    graph.animation(
+      'style',
+      {
+        translate: [renderer.area[0], 0]
+      },
+      true
+    )
+  })
 
-    addWave(mergedConfig)
+  yield renderer.launchAnimation()
+}
 
-    animationWave()
-  }
+const WaterLevelPond = ({ config, className, style }) => {
+  const [renderer, setRenderer] = useState(null)
 
-  function calcSvgBorderGradient({ colors }) {
-    const colorNum = colors.length
+  const gradientId = useRef(`water-level-pond-${Date.now()}`).current
 
-    const colorOffsetGap = 100 / (colorNum - 1)
+  const domRef = useRef(null)
 
-    return colors.map((c, i) => [colorOffsetGap * i, c])
-  }
+  const mergedConfig = useMemo(
+    () => deepMerge(deepClone(defaultConfig, true), config),
+    [config]
+  )
 
-  function calcDetails({ data, formatter }) {
-    if (!data.length) {
-      return ''
-    }
+  const svgBorderGradient = useMemo(() => calcSvgBorderGradient(mergedConfig), [
+    mergedConfig
+  ])
 
-    const maxValue = Math.max(...data)
+  const details = useMemo(() => calcDetails(mergedConfig), [mergedConfig])
 
-    return formatter.replace('{value}', maxValue)
-  }
+  const radius = useMemo(() => {
+    const { shape } = mergedConfig
 
-  function addWave(mergedConfig) {
-    const shapes = getWaveShapes(mergedConfig)
-    const style = getWaveStyle(mergedConfig)
+    if (shape === 'round') return '50%'
 
-    wavesRef.current = shapes.map(shape =>
-      rendererRef.current.add({
-        name: 'smoothline',
-        animationFrame: 300,
-        shape,
-        style,
-        drawed
-      })
-    )
-  }
+    if (shape === 'rect') return '0'
 
-  function getWaveShapes({ waveNum, waveHeight, data }) {
-    const [w, h] = rendererRef.current.area
+    if (shape === 'roundRect') return '10px'
 
-    const pointsNum = waveNum * 4 + 4
+    return '0'
+  }, [mergedConfig])
 
-    const pointXGap = w / waveNum / 2
+  const shape = useMemo(() => {
+    const { shape } = mergedConfig
 
-    return data.map(v => {
-      let points = new Array(pointsNum).fill(0).map((foo, j) => {
-        const x = w - pointXGap * j
+    return shape || 'rect'
+  }, [mergedConfig])
 
-        const startY = (1 - v / 100) * h
+  useEffect(() => {
+    let innerRenderer = renderer
 
-        const y = j % 2 === 0 ? startY : startY - waveHeight
+    if (!renderer) {
+      innerRenderer = new CRender(domRef.current)
 
-        return [x, y]
-      })
+      setRenderer(innerRenderer)
+    }
 
-      points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))
+    function * loop() {
+      yield new Promise(resolve => setTimeout(resolve, 30))
 
-      return { points }
-    })
-  }
+      const wave = getWave(mergedConfig, innerRenderer)
 
-  function getWaveStyle({ colors, waveOpacity }) {
-    const h = rendererRef.current.area[1]
+      while (true) {
+        yield * animationWave(wave, innerRenderer)
 
-    return {
-      gradientColor: colors,
-      gradientType: 'linear',
-      gradientParams: [0, 0, 0, h],
-      gradientWith: 'fill',
-      opacity: waveOpacity,
-      translate: [0, 0]
+        if (!innerRenderer.graphs.length) return
+      }
     }
-  }
 
-  async function animationWave(repeat = 1) {
-    const waves = wavesRef.current
-    const renderer = rendererRef.current
-    const animation = animationRef.current
+    const undescribe = co(loop)
 
-    if (animation) return
-
-    animationRef.current = true
-
-    const w = renderer.area[0]
-
-    waves.forEach(graph => {
-      graph.attr('style', { translate: [0, 0] })
-
-      graph.animation(
-        'style',
-        {
-          translate: [w, 0]
-        },
-        true
-      )
-    })
-
-    await renderer.launchAnimation()
-
-    animationRef.current = false
-
-    if (!renderer.graphs.length) return
-
-    animationWave(repeat + 1)
-  }
-
-  useEffect(() => {
-    init()
-
     return () => {
-      rendererRef.current.delAllGraph()
+      innerRenderer.delAllGraph()
 
-      wavesRef.current = []
+      undescribe()
     }
-  }, [])
+  }, [mergedConfig])
 
-  useEffect(() => {
-    rendererRef.current.delAllGraph()
-
-    wavesRef.current = []
-
-    setTimeout(calcData, 0)
-  }, [config])
-
   const classNames = useMemo(
@@ -264,0 +235,0 @@ () => classnames('dv-water-pond-level', className),

src/use/autoResize.js

 import { useState, useCallback, useEffect, useRef } from 'react'
 import { debounce, observerDomResize } from '../util/index'
 
-export default function useAutoResize(afterAutoResizeMixinInit, onResize) {
+export default function useAutoResize() {
   const [state, setState] = useState({ width: 0, height: 0 })
@@ -10,14 +10,7 @@
   const debounceSetWHFunRef = useRef(null)
-  const onResizeRef = useRef(onResize)
 
-  onResizeRef.current = onResize
-
-  const setWH = useCallback((resize = true) => {
+  const setWH = useCallback(() => {
     const { clientWidth, clientHeight } = domRef.current
 
     setState({ width: clientWidth, height: clientHeight })
-
-    if (typeof onResizeRef.current === 'function' && resize) {
-      onResizeRef.current()
-    }
   }, [])
@@ -47,8 +40,6 @@
 
-    debounceSetWHFunRef.current(false)
+    debounceSetWHFunRef.current()
 
     bindDomResizeCallback()
 
-    typeof afterAutoResizeMixinInit === 'function' && afterAutoResizeMixinInit()
-
     // 组件销毁时，清除事件
@@ -55,0 +46,0 @@ return unbindDomResizeCallback

src/util/index.js

@@ -59,19 +59,25 @@ export function randomExtend(minNum, maxNum) {
 export function co(gen) {
-  if (!gen || typeof gen.next !== 'function') return
+  let destroyed = false
 
-  next(gen.next())
+  if (typeof gen === 'function') gen = gen()
 
-  function next(ret) {
-    if (ret.done) return ret.value
+  if (!gen || typeof gen.next !== 'function') return () => ({})
 
-    const value = ret.value
+  Promise.resolve().then(() => {
+    destroyed || next(gen.next())
+  })
 
-    if (value && !isPromise(value)) return next(gen.next())
+  return () => {
+    destroyed = true
 
-    if (value && isPromise(value)) return value.then(() => next(gen.next()))
+    gen.return()
   }
 
-  function isPromise(obj) {
-    return typeof obj.then === 'function'
+  function next(ret) {
+    if (ret.done) return ret.value
+
+    return Promise.resolve(ret.value).then(() => {
+      destroyed || next(gen.next())
+    })
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

4079608

decreased by-0.47%

Lines of code

54116

decreased by-0.61%

Number of lines in readme file

76

decreased by-10.59%

No dependency changes