public: 4.0.4

.eslintignore

@@ -3,3 +3,4 @@ lib/
 __stories__/
 test/_helpers/
 webpack.config.js
+umd/

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'lines-between-class-members': 0,
     'class-methods-use-this': 0,
     'no-lonely-if': 0,
-    'no-param-reassign': 0
+    'no-param-reassign': 0,
+    'no-useless-escape': 0
   }
 };

__stories__/area.stories.tsx

@@ -16,3 +16,6 @@ storiesOf('area', module).add('色块图', colorBlock);
 storiesOf('area', module).add('区间面积图', intervalArea);
 storiesOf('area', module).add('百分比堆叠面积图', percentStackingArea);
 storiesOf('area', module).add('堆叠面积图', stackingArea);
+
+
+

demos/components/annotation.jsx

@@ -1,11 +1,8 @@
 import React from "react";
 import {
   Chart,
-  Tooltip,
-  Interval,
-  Annotation,
-  Axis,
-  registerShape
+  registerShape,
+  Effects
 } from "../../src";
 
 registerShape('interval', 'border-radius', {
@@ -78,7 +75,7 @@ function Demo() {
   };
   return (
     <Chart height={400} scale={scale} padding="auto" data={activeData} autoFit>
-      <Interval
+      {/* <Interval
         color="#cbcbcb"
         shape="border-radius"
         position="date*expected"
@@ -130,7 +127,79 @@ function Demo() {
           textBaseline: 'top',
         }}
       />
-      <Tooltip shared />
+      <Tooltip shared /> */}
+      <Effects>
+        {chart => {
+
+chart.axis('date', false);
+chart.axis('actual', false);
+chart.axis('expected', {
+  line: null,
+  tickLine: null,
+  title: null,
+  position: 'right',
+  label: {
+    formatter: (val) => {
+      if (val === '1200') {
+        return '';
+      }
+      return val;
+    },
+  },
+});
+chart.legend(false);
+chart.tooltip({
+  shared: true,
+  showMarkers: false,
+});
+
+chart
+  .interval()
+  .position('date*expected')
+  .color('#cbcbcb')
+  .shape('border-radius')
+  .tooltip('expected')
+  .style({
+    opacity: 0.6,
+  });
+chart
+  .interval()
+  .position('date*actual')
+  .color('#5B8FF9')
+  .tooltip('actual')
+  .shape('date*actual', (date, val) => {
+    if (val === 0) {
+      return;
+    }
+    // eslint-disable-next-line consistent-return
+    return 'border-radius';
+  });
+
+chart.annotation().text({
+  position: ['min', 'max'],
+  content: '活动',
+  style: {
+    fill: '#5B8FF9',
+    fontSize: 20,
+    fontWeight: 'bold',
+    textBaseline: 'top',
+  },
+});
+
+chart.annotation().text({
+  position: ['max', 'max'],
+  content: '67 / 900 千卡',
+  style: {
+    fill: '#cbcbcb',
+    fontSize: 20,
+    textAlign: 'end',
+    textBaseline: 'top',
+  },
+});
+
+chart.interaction('active-region');
+        }}
+      </Effects>
     </Chart>
   );
 }

demos/geom/path.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
-import { Chart, G2, Path, Point, Geom } from '../../src';
+import React, { useRef } from 'react';
+import { Chart, Path, Point } from '../../src';
 
 // 数据源
 const data = [
@@ -22,57 +22,9 @@ const data = [
 
 function Demo() {
   const container = useRef();
-  useEffect(() => {
-    const chart = new G2.Chart({
-      container: container.current,
-      height: 200,
-      autoFit: true,
-    })
-    chart.data(data);
-    chart.axis(true);
-    chart.legend(true);
-    chart.tooltip({ showMarkers: false })
-    chart
-      .path()
-      .animate({
-        appear: {
-          animation: 'path-in',
-          duration: 1000,
-          easing: 'easeLinear',
-        }
-      })
-      .position('price*consumption')
-      .label('year', (val) => {
-        return {
-          content: `${val} 年`,
-          animate: {
-            appear: {
-              delay: 1000
-            }
-          }
-        };
-      });
-    chart
-      .point()
-      .animate({
-        appear: {
-          appear: 'fade-in',
-          duration: 200,
-          delay: (obj) => {
-            const index = data.findIndex(item => item.year === obj.year);
-            return index * (1000 / data.length);
-          },
-          easing: 'easeLinear',
-        }
-      })
-      .position('price*consumption')
-      .shape('square');
-    chart.render();
-  }, [])
   return <>
   <div ref={container} />
   <Chart height={200} padding={[20, 40]} autoFit data={data} >
-    <Geom type="" />
      <Path
       animate={{
         appear: {

demos/plot/plots.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from "react";
+import React, { useState } from "react";
 import { LineChart, BarChart, Axis, Chart, Coordinate, Tooltip, Interval, View } from '../../src';
 
 import { Text } from '../../src/components/Annotation';
@@ -26,7 +26,7 @@ function Pie ({ data }) {
 const data = [
   {
     year: "1991",
-    value: 3
+    value: 5
   },
   {
     year: "1992",
@@ -47,6 +47,8 @@ const data = [
 ];
 
 function Basic(options) {
+  const [value, setValue] = useState(1);
+  data[0].value = value;
   return (
     <div>
       <LineChart
@@ -62,12 +64,16 @@ function Basic(options) {
         <Axis visible={false} name="value" />
         <Text position={ ['50%', '50%']} content="24 hours" />
         <Tooltip >
-          {() => {
+          {/* {() => {
             return <div>123</div>
-          }}
+          }} */}
         </Tooltip>
       </LineChart>
+      <div onClick={() => {
+        setValue(value+1);
+      }}>click me</div>
       <BarChart
+        title="图表标题"
         data={data}
         yField="year"
         xField="value"

demos/plot/ring.jsx

@@ -63,37 +63,14 @@ const config = {
     "visible": true,
     "text": "一个简单的环形图"
   },
-  "legend": {
-    "position": "left-top",
-    "flipPage": false,
-    "offsetX": 0
-  },
   "label": {
     "type": "spider"
   },
   "width": 580,
   "height": 460,
   "forceFit": false,
-  "radius": 1,
-  "statistic": {
-    "visible": false
-  },
   "colorField": "x",
   "angleField": "y",
-  "color": [
-    "#5B8FF9",
-    "#5AD8A6",
-    "#5D7092",
-    "#F6BD16",
-    "#E8684A",
-    "#6DC8EC",
-    "#9270CA",
-    "#FF9D4D",
-    "#269A99",
-    "#FF99C3",
-    "#5B8FF9",
-    "#BDD2FD"
-  ]
 }
 
 function Basic() {