fix: fix update config not work

open-data-plan · Jul 1, 2020 · 5162143 · 5162143
1 parent 1336045
commit 5162143
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/.babelignore b/.babelignore
@@ -0,0 +1 @@
+.umi
diff --git a/docs/guide/get-started.md b/docs/guide/get-started.md
@@ -116,3 +116,161 @@ export default () => {
   return <LineChart {...config} ref={getContainer} chartRef={getChart} />
 }
 ```
+
+## Update Data
+
+```tsx
+import React, { useCallback, useState } from 'react'
+import { LineChart } from '@opd/g2plot-react'
+
+const config = {
+  height: 400,
+  title: {
+    visible: true,
+    text: 'LineChart',
+  },
+  description: {
+    visible: true,
+    text: 'This is Description',
+  },
+  padding: 'auto',
+  forceFit: true,
+  xField: 'year',
+  yField: 'value',
+  label: {
+    visible: true,
+    type: 'point',
+  },
+  point: {
+    visible: true,
+    size: 5,
+  },
+  xAxis: {
+    tickCount: 10,
+  },
+}
+
+export default () => {
+  const getChart = useCallback((chart) => {
+    console.log(chart)
+  }, [])
+  const getContainer = useCallback((container) => {
+    console.log(container)
+  }, [])
+
+  const [data, setData] = useState([
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 11 },
+  ])
+
+  const handleBtnClick = useCallback(() => {
+    setData([
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+      { year: '1993', value: 3.5 },
+      { year: '1994', value: 5 },
+      { year: '1995', value: 4.9 },
+      { year: '1996', value: 6 },
+      { year: '1997', value: 7 },
+      { year: '1998', value: 9 },
+      { year: '1999', value: 11 },
+      { year: '2000', value: 14 },
+    ])
+  }, [])
+
+  return (
+    <div>
+      <button onClick={handleBtnClick}>Update Data</button>
+      <LineChart
+        {...config}
+        ref={getContainer}
+        chartRef={getChart}
+        data={data}
+      />
+    </div>
+  )
+}
+```
+
+## Update Config
+
+```tsx
+import React, { useCallback, useState } from 'react'
+import { LineChart } from '@opd/g2plot-react'
+
+const config = {
+  height: 400,
+  title: {
+    visible: true,
+    text: 'LineChart',
+  },
+  description: {
+    visible: true,
+    text: 'This is Description',
+  },
+  padding: 'auto',
+  forceFit: true,
+  xField: 'year',
+  yField: 'value',
+  label: {
+    visible: true,
+    type: 'point',
+  },
+  point: {
+    visible: true,
+    size: 5,
+  },
+  xAxis: {
+    tickCount: 10,
+  },
+  data: [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 11 },
+  ],
+}
+
+export default () => {
+  const getChart = useCallback((chart) => {
+    console.log(chart)
+  }, [])
+  const getContainer = useCallback((container) => {
+    console.log(container)
+  }, [])
+
+  const [restConfig, setConfig] = useState({})
+
+  const handleBtnClick = useCallback(() => {
+    setConfig({
+      point: {
+        visible: false,
+      },
+    })
+  }, [])
+
+  return (
+    <div>
+      <button onClick={handleBtnClick}>Update Config</button>
+      <LineChart
+        {...config}
+        ref={getContainer}
+        chartRef={getChart}
+        {...restConfig}
+      />
+    </div>
+  )
+}
+```
diff --git a/src/components/base/index.tsx b/src/components/base/index.tsx
@@ -134,6 +134,7 @@ const BaseChart = <C extends PlotConfig>(
         if (!isEqual(config, configRef.current)) {
           configRef.current = cloneDeep(config)
           chart.updateConfig(config as RecursivePartial<C>)
+          chart.render()
         } else {
           if (data) {
             chart.changeData(data)