From 1bd8617b1b478fad2833ca5842ddfaedb1f9c471 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Wed, 13 Sep 2023 15:55:33 +0800
Subject: [PATCH] Update README

---
 README.md     | 204 +++++++++++++++++++++++++++++++++++++++-----------
 src/Chart.tsx |   8 +-
 2 files changed, 168 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 9f371db..64092be 100644
--- a/README.md
+++ b/README.md
@@ -33,73 +33,191 @@ export function Card() {
 
 ## API Reference
 
-| Property | Description                                             | Type               | Default |
-| -------- | ------------------------------------------------------- | ------------------ | ------- |
-| spec     | spec for visualization , say `chart.options(spec)`      | `G2Spec` \| `null` | -       |
-| options  | options for instantiating char, say `G2.Chart(options)` | `ChartOptions`     | -       |
-| style    | style of the container                                  | `CSSProperties`    | -       |
-| onInit   | callback called after the chart instantiating           | `Function`         | -       |
-| ref      | ref for chart instance                                  | `ChartRef`         | -       |
+| Property | Description                                                                                                                                        | Type               | Default |
+| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
+| spec     | the [spec](https://g2.antv.antgroup.com/manual/core/api) for 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 char, 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`         | -       |
 
 ## Examples
 
-There are some basic examples where you can get started.
+- [Creating Chart](#creating-chart)
+- [Fetching Data](#fetching-data)
+- [Handling Events](#handling-events)
+- [Customizing Component](#customizing-component)
+- [Styling Container](#styling-container)
 
-### Create Chart
-
-### Fetch Data
+## Creating Chart
 
 ```js
-import React, { useState } from "react";
+import React from "react";
 import { Chart } from "@strawberry-vis/g2-rect";
+import { Renderer } from "@antv/g-svg";
 
-export function Card() {
-  const [options, setOptions] = useState({
-    type: "interval",
-    data: [
-      { genre: "Sports", sold: 275 },
-      { genre: "Strategy", sold: 115 },
-      { genre: "Action", sold: 120 },
-      { genre: "Shooter", sold: 350 },
-      { genre: "Other", sold: 150 },
-    ],
-    encode: { x: "genre", y: "sold" },
-  });
+export function Demo() {
+  return (
+    <Chart
+      // Sets some global options for creating chart.
+      options={{
+        autoFit: true, // Fits the container.
+        renderer: new Renderer(), // Renders chart into a SVG node.
+      }}
+      // Sets the options related to visualization.
+      spec={{
+        type: "interval",
+        data: [
+          { genre: "Sports", sold: 275 },
+          { genre: "Strategy", sold: 115 },
+          { genre: "Action", sold: 120 },
+          { genre: "Shooter", sold: 350 },
+          { genre: "Other", sold: 150 },
+        ],
+        encode: { x: "genre", y: "sold" },
+      }}
+    />
+  );
+}
+```
 
-  function onClick() {
-    setOptions({
-      ...options,
-      data: options.data.slice(0, 2),
-    });
-  }
+### Fetching Data
 
-  return (
-    <div>
-      <Chart options={options} />
-      <button onClick={onClick}>Update Options</button>
-    </div>
+```js
+import React, { useState, useMemo } from "react";
+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(
+    () => ({
+      type: "interval",
+      data,
+      encode: { x: "genre", y: "sold" },
+    }),
+    [data]
   );
+
+  useEffect(() => {
+    // Mocks fetch.
+    setTimeout(() => {
+      // Updates data.
+      setData([
+        { genre: "Sports", sold: 275 },
+        { genre: "Strategy", sold: 115 },
+        { genre: "Action", sold: 120 },
+        { genre: "Shooter", sold: 350 },
+        { genre: "Other", sold: 150 },
+      ]);
+    }, 1000);
+  });
+
+  return <>{data === null ? <p>Loading...</p> : <Chart spec={spec} />}</>;
 }
 ```
 
-### Listen Events
+### Handling Events
 
 ```js
 import React, { useRef, useEffect } from "react";
+import { ChartEvent } from "@antv/g2";
 import { Chart } from "@strawberry-vis/g2-rect";
 
-export function Card() {
+export function Demo() {
   const chartRef = useRef();
 
-  useEffect(() => {
+  function onInit() {
     const chart = chartRef.current;
-    chart.on("afterrender", () => {});
-  }, []);
 
-  return <Chart options={options} chartRef={chartRef} />;
+    // Listens input events.
+    chart.on("plot:mouseover", () => {});
+
+    // Listens lifecycle events.
+    chart.on(ChartEvent.AFTER_RENDER, () => {
+      // Emits to init the state of highlight interaction.
+      chart.emit("element:highlight", {
+        data: {
+          data: { genre: "Sports" },
+        },
+      });
+    });
+  }
+
+  return <Chart ref={chartRef} onInit={onInit} />;
 }
 ```
 
-### Emit Events
+### Customizing Component
 
-### Style Container
+```js
+import React, { useRef, useEffect } from "react";
+import { register } from "@antv/g2";
+
+// Registers a triangle shape for interval globally.
+register("shape.interval.triangle", (style, context) => {
+  const { document } = context;
+  return (P, value, defaults) => {
+    const { color: defaultColor } = defaults;
+    const [p0, p1, p2, p3] = P;
+    const pm = [(p0[0] + p1[0]) / 2, p0[1]];
+    const { color = defaultColor } = value;
+    const group = document.createElement("g");
+    const polygon = document.createElement("polygon", {
+      style: {
+        ...style,
+        fill: color,
+        points: [pm, p2, p3],
+      },
+    });
+    group.appendChild(polygon);
+    return group;
+  };
+});
+
+export function Demo() {
+  return (
+    <Chart
+      spec={{
+        type: "interval",
+        data: [
+          { genre: "Sports", sold: 275 },
+          { genre: "Strategy", sold: 115 },
+          { genre: "Action", sold: 120 },
+          { genre: "Shooter", sold: 350 },
+          { genre: "Other", sold: 150 },
+        ],
+        encode: {
+          x: "genre",
+          y: "sold",
+          shape: "triangle", // Uses the custom shape.
+        },
+      }}
+    />
+  );
+}
+```
+
+### Styling Container
+
+```js
+import React from "react";
+import { Chart } from "@strawberry-vis/g2-rect";
+
+export function Demo() {
+  // ...
+  return (
+    <Chart
+      options={{ autoFit: true }}
+      style={{
+        width: 800,
+        height: 600,
+        background: "#eee",
+        padding: "1em",
+        borderRadius: "0.5em",
+      }}
+    />
+  );
+}
+```
diff --git a/src/Chart.tsx b/src/Chart.tsx
index 0b9cd50..1a16353 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -6,10 +6,16 @@ import React, {
   forwardRef,
   CSSProperties,
 } from "react";
-import { Chart as G2Chart, G2Spec, ChartOptions } from "@antv/g2";
+import {
+  Chart as G2Chart,
+  G2Spec,
+  ChartOptions as G2ChartOptions,
+} from "@antv/g2";
 
 export type ChartRef = G2Chart | undefined;
 
+export type ChartOptions = Omit<G2ChartOptions, "container">;
+
 export type ChartProps = {
   spec: G2Spec | null;
   options?: ChartOptions;