From 1aa7bbf11710fe4c2059a0cd3ec89e424c461768 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Fri, 15 Sep 2023 12:19:07 +0800
Subject: [PATCH] Change props.spec to props.options (#1)

---
 README.md                                     | 34 +++++++++----------
 src/Chart.tsx                                 | 14 ++++----
 test/demos/chart-fetch.tsx                    |  4 +--
 test/demos/chart-loading.tsx                  |  4 +--
 test/demos/chart-options.tsx                  |  4 +--
 test/demos/chart-ref.tsx                      |  2 +-
 .../{chart-spec.tsx => chart-renderer.tsx}    |  9 +++--
 test/demos/chart-style.tsx                    |  2 +-
 test/demos/chart-update.tsx                   |  2 +-
 test/demos/index.ts                           |  4 +--
 10 files changed, 39 insertions(+), 40 deletions(-)
 rename test/demos/{chart-spec.tsx => chart-renderer.tsx} (66%)

diff --git a/README.md b/README.md
index 9aba816..f8207e0 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ import { Chart } from "@strawberry-vis/g2-rect";
 export function Demo() {
   return (
     <Chart
-      spec={{
+      options={{
         type: "interval",
         width: 640,
         height: 480,
@@ -35,13 +35,13 @@ export function Demo() {
 
 ## API Reference
 
-| Property | Description                                                                                                                                        | Type               | Default |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
-| spec     | the [spec](https://g2.antv.antgroup.com/manual/core/api) for the visualization , say `chart.options(spec)`                                             | `G2Spec` \| `null` | -       |
-| options  | the [options](https://g2.antv.antgroup.com/manual/core/chart#%E5%85%A8%E5%B1%80%E9%80%89%E9%A1%B9) for instantiating the chart, say `G2.Chart(options)` | `ChartOptions`     | -       |
-| style    | the style of the container                                                                                                                         | `CSSProperties`    | -       |
-| onInit   | the callback called after the chart instantiating                                                                                                  | `Function`         | -       |
-| ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                                                   | `ChartRef`         | -       |
+| Property | Description                                                                                                     | Type                  | Default |
+| -------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
+| options  | the [options](https://g2.antv.antgroup.com/manual/core/api) for the visualization, say `chart.options(options)` | `G2options` \| `null` | -       |
+| renderer | the [renderer](https://g.antv.antgroup.com/api/renderer/intro) of @antv/g canvas.                               | `ChartOptions`        | -       |
+| style    | the style of the container                                                                                      | `CSSProperties`       | -       |
+| onInit   | the callback called after the chart instantiating                                                               | `Function`            | -       |
+| ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                | `ChartRef`            | -       |
 
 ## Examples
 
@@ -59,16 +59,14 @@ import { Chart } from "@strawberry-vis/g2-rect";
 import { Renderer } from "@antv/g-svg";
 
 export function Demo() {
+  const renderer = useMemo(() => new Renderer(), []);
   return (
     <Chart
-      // Set some global options for creating chart.
+      // Set renderer to SVG, optional.
+      renderer={renderer}
       options={{
-        autoFit: true, // Fit the container.
-        renderer: new Renderer(), // Render the chart into a SVG node.
-      }}
-      // Set the options related to charts.
-      spec={{
         type: "interval",
+        autoFit: true, // Fit the container.
         data: [
           { genre: "Sports", sold: 275 },
           { genre: "Strategy", sold: 115 },
@@ -92,8 +90,8 @@ import { Chart } from "@strawberry-vis/g2-rect";
 export function Demo() {
   const [data, setData] = useState(null);
 
-  // The spec will update after data updating.
-  const spec = useMemo(
+  // The options will update after data updating.
+  const options = useMemo(
     () => ({
       type: "interval",
       data,
@@ -116,7 +114,7 @@ export function Demo() {
     }, 1000);
   });
 
-  return <>{data === null ? <p>Loading...</p> : <Chart spec={spec} />}</>;
+  return <>{data === null ? <p>Loading...</p> : <Chart options={options} />}</>;
 }
 ```
 
@@ -181,7 +179,7 @@ register("shape.interval.triangle", (style, context) => {
 export function Demo() {
   return (
     <Chart
-      spec={{
+      options={{
         type: "interval",
         data: [
           { genre: "Sports", sold: 275 },
diff --git a/src/Chart.tsx b/src/Chart.tsx
index 1a16353..cc9e977 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -17,14 +17,14 @@ export type ChartRef = G2Chart | undefined;
 export type ChartOptions = Omit<G2ChartOptions, "container">;
 
 export type ChartProps = {
-  spec: G2Spec | null;
-  options?: ChartOptions;
+  options: G2Spec | null;
+  renderer?: G2ChartOptions["renderer"];
   style?: CSSProperties;
   onInit?: () => void;
 };
 
 export const Chart = forwardRef<ChartRef, ChartProps>((props, ref) => {
-  const { spec, style, onInit, options } = props;
+  const { options, style, onInit, renderer } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<G2Chart>();
   const [init, setInit] = useState(false);
@@ -32,8 +32,8 @@ export const Chart = forwardRef<ChartRef, ChartProps>((props, ref) => {
   useEffect(() => {
     if (containerRef.current) {
       chartRef.current = new G2Chart({
-        ...options,
         container: containerRef.current,
+        renderer,
       });
       setInit(true);
     }
@@ -47,11 +47,11 @@ export const Chart = forwardRef<ChartRef, ChartProps>((props, ref) => {
   }, [init]);
 
   useEffect(() => {
-    if (chartRef.current && spec) {
-      chartRef.current.options(spec);
+    if (chartRef.current && options) {
+      chartRef.current.options(options);
       chartRef.current.render();
     }
-  }, [spec]);
+  }, [options]);
 
   useImperativeHandle(ref, () => chartRef.current, [init]);
 
diff --git a/test/demos/chart-fetch.tsx b/test/demos/chart-fetch.tsx
index c219707..67ece2e 100644
--- a/test/demos/chart-fetch.tsx
+++ b/test/demos/chart-fetch.tsx
@@ -4,7 +4,7 @@ import { render } from "./render";
 
 function Demo() {
   const [data, setData] = useState<Record<string, any>[] | null>(null);
-  const spec = useMemo(() => {
+  const options = useMemo(() => {
     if (data === null) return null;
     return {
       type: "interval",
@@ -26,7 +26,7 @@ function Demo() {
     }, 1000);
   });
 
-  return <Chart spec={spec} />;
+  return <Chart options={options} />;
 }
 
 export const ChartFetch = render(Demo);
diff --git a/test/demos/chart-loading.tsx b/test/demos/chart-loading.tsx
index a525dc1..57357ad 100644
--- a/test/demos/chart-loading.tsx
+++ b/test/demos/chart-loading.tsx
@@ -4,7 +4,7 @@ import { render } from "./render";
 
 function Demo() {
   const [data, setData] = useState<Record<string, any>[] | null>(null);
-  const spec = useMemo(
+  const options = useMemo(
     () => ({
       type: "interval",
       data,
@@ -26,7 +26,7 @@ function Demo() {
     }, 1000);
   });
 
-  return <>{data === null ? <p>loading...</p> : <Chart spec={spec} />}</>;
+  return <>{data === null ? <p>loading...</p> : <Chart options={options} />}</>;
 }
 
 export const ChartLoading = render(Demo);
diff --git a/test/demos/chart-options.tsx b/test/demos/chart-options.tsx
index bdfd178..4f0dba0 100644
--- a/test/demos/chart-options.tsx
+++ b/test/demos/chart-options.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-import { Renderer } from "@antv/g-svg";
 import { Chart } from "../../src";
 import { render } from "./render";
 
 function Demo() {
   return (
     <Chart
-      options={{ renderer: new Renderer() }}
-      spec={{
+      options={{
         type: "interval",
         data: [
           { genre: "Sports", sold: 275 },
diff --git a/test/demos/chart-ref.tsx b/test/demos/chart-ref.tsx
index 34c3a2f..5bfb5f6 100644
--- a/test/demos/chart-ref.tsx
+++ b/test/demos/chart-ref.tsx
@@ -21,7 +21,7 @@ function Demo() {
   return (
     <Chart
       ref={chartRef}
-      spec={{
+      options={{
         type: "interval",
         data: [
           { genre: "Sports", sold: 275 },
diff --git a/test/demos/chart-spec.tsx b/test/demos/chart-renderer.tsx
similarity index 66%
rename from test/demos/chart-spec.tsx
rename to test/demos/chart-renderer.tsx
index 9023026..f2d55df 100644
--- a/test/demos/chart-spec.tsx
+++ b/test/demos/chart-renderer.tsx
@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { Renderer } from "@antv/g-svg";
 import { Chart } from "../../src";
 import { render } from "./render";
 
 function Demo() {
+  const renderer = useMemo(() => new Renderer(), []);
   return (
     <Chart
-      spec={{
+      renderer={renderer}
+      options={{
         type: "interval",
         data: [
           { genre: "Sports", sold: 275 },
@@ -20,4 +23,4 @@ function Demo() {
   );
 }
 
-export const chartSpec = render(Demo);
+export const chartRenderer = render(Demo);
diff --git a/test/demos/chart-style.tsx b/test/demos/chart-style.tsx
index 1713ebc..1dafeb9 100644
--- a/test/demos/chart-style.tsx
+++ b/test/demos/chart-style.tsx
@@ -5,7 +5,7 @@ import { render } from "./render";
 function Demo() {
   return (
     <Chart
-      spec={{
+      options={{
         type: "interval",
         autoFit: true,
         data: [
diff --git a/test/demos/chart-update.tsx b/test/demos/chart-update.tsx
index 10956f1..9532484 100644
--- a/test/demos/chart-update.tsx
+++ b/test/demos/chart-update.tsx
@@ -26,7 +26,7 @@ function Demo() {
 
   return (
     <>
-      <Chart spec={options} />
+      <Chart options={options} />
       <button onClick={onClick}>Update</button>
     </>
   );
diff --git a/test/demos/index.ts b/test/demos/index.ts
index 0b0d6a5..a57c1d3 100644
--- a/test/demos/index.ts
+++ b/test/demos/index.ts
@@ -1,7 +1,7 @@
-export { chartSpec } from "./chart-spec";
+export { chartOptions } from "./chart-options";
 export { chartUpdate } from "./chart-update";
 export { chartStyle } from "./chart-style";
 export { chartRef } from "./chart-ref";
-export { chartOptions } from "./chart-options";
+export { chartRenderer } from "./chart-renderer";
 export { ChartFetch } from "./chart-fetch";
 export { ChartLoading } from "./chart-loading";