docs: 2.0

wuba · Oct 15, 2024 · bb4f1b5 · bb4f1b5
1 parent 60857c3
commit bb4f1b5
Show file tree

Hide file tree

Showing 33 changed files with 317 additions and 89 deletions.
diff --git a/docs/about/_category_.json b/docs/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
 
diff --git a/docs/advanced-guides/import-individually.md b/docs/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # Import individually
 
-if you only need to use the react-native-skia renderer, you can import the SVGRenderer and SkiaChart individually.
+if you only need to use the react-native-skia renderer, you can import the SkiaRenderer and SkiaChart individually.
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 if you only need to use the react-native-svg renderer, you can import the SVGRenderer and SvgChart individually.

diff --git a/docs/getting-started/write-a-adaptive-height-chart.md b/docs/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. Use echarts.use to register renderers and charts.
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. Create a Ref for the SkiaChart component and use a View container to wrap it. Use onLayout to obtain the container's width and height for later assignment to the ECharts chart.
@@ -82,7 +82,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -251,6 +251,6 @@ You should see the following screen:
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
+If you want to use the react-native-svg，just replace the SkiaChart with SvgChart and use 'svg' as renderer.
 
 For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).
diff --git a/docs/getting-started/write-a-dynamic-data-chart.md b/docs/getting-started/write-a-dynamic-data-chart.md
@@ -419,6 +419,6 @@ You should see the following screen:
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-If you want to use the react-native-skia，just replace the SvgChart with SkiaChart。
+If you want to use the react-native-skia，just replace the SvgChart with SkiaChart and use 'skia' as renderer.
 
 For more chart configuration, please refer to [echarts documentation](https://echarts.apache.org/en/option.html#title).
diff --git a/docs/getting-started/write-a-simple-line-chart.md b/docs/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ Next let's try to draw the most basic diagram - Basic Line Chart.
 
 To see how it looks like in the browser, you can visit the [echarts editor](https://echarts.apache.org/examples/en/editor.html?c=line-simple) and try to modify the configuration to see the changes.
 
-1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SVGRenderer.
+1. import echarts, @wuba/react-native-echarts, react. Here I have only import SkiaChart and SkiaRenderer.
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. use echarts.use to register the renderer and chart.
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. create a ref for the SkiaChart.
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -78,9 +78,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -103,7 +103,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -121,6 +121,6 @@ You should see the following screen:
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-If you want to use the react-native-svg, just replace the SkiaChart with SvgChart.
+If you want to use the react-native-svg, just replace the SkiaChart with SvgChart and use 'svg' as renderer.
 
 Next you can find more configurations to use in @wuba/react-native-echarts from the [echarts examples](https://echarts.apache.org/examples/en/index.html).
diff --git a/docs/migration/_category_.json b/docs/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}
diff --git a/docs/migration/v2.md b/docs/migration/v2.md
@@ -0,0 +1,53 @@
+---
+sidebar_position: 1
+---
+
+# Migrate from v1 to v2
+
+## Key Changes
+- **SVGRenderer** and **SkiaRenderer** are now split.
+- **SkiaChart** refactored, no more `ImageSVG` tag.
+- Added support for new rendering effects (e.g., shadows).
+
+## Steps to Migrate from v1 to v2
+
+SVGChart has no changes, so you can skip this migration if you are using SVGChart.
+
+### Summary
+
+- Replace **SVGRenderer** with **SkiaRenderer**.
+- Set `renderer: 'skia'` when initializing the chart.
+
+### 1. Update Imports
+
+#### v1
+
+```js
+import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SVGRenderer]);
+```
+
+#### v2
+
+```js
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
+echarts.use([SkiaRenderer]);
+```
+
+### 2. Initialize Chart with SkiaRenderer
+
+#### v1
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'svg',
+});
+```
+
+#### v2
+
+```js
+chart = echarts.init(skiaRef.current, 'light', {
+  renderer: 'skia',
+});
+```
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json b/i18n/ja/docusaurus-plugin-content-docs/current/about/_category_.json
@@ -1,5 +1,5 @@
 {
     "label": "About",
-    "position": 6
+    "position": 7
   }
 
diff --git a/...a/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md b/...a/docusaurus-plugin-content-docs/current/advanced-guides/import-individually.md
@@ -4,9 +4,9 @@ sidebar_position: 1
 
 # 個別にインポートする
 
-もし、react-native-skia レンダラーのみを使用する場合は、SVGRenderer と SkiaChart を個別にインポートすることができます。
+もし、react-native-skia レンダラーのみを使用する場合は、SkiaRenderer と SkiaChart を個別にインポートすることができます。
 ```tsx
-import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
+import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
 ```
 
 もし、react-native-svg レンダラーのみを使用する場合は、SVGRenderer と SvgChart を個別にインポートすることができます。

diff --git a/...us-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md b/...us-plugin-content-docs/current/getting-started/write-a-adaptive-height-chart.md
@@ -14,13 +14,13 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 ```
 
 2. echarts.useを使用してレンダラとチャートを登録します。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. SkiaChartコンポーネントのためのRefを作成し、Viewコンテナでそれをラップします。後でEChartsのチャートに割り当てるために、onLayoutを使用してコンテナの幅と高さを取得します。
@@ -82,7 +82,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, "light", {
-  renderer: "svg",
+  renderer: "skia",
   width: chartWidth,
   height: chartHeight,
 });
@@ -135,9 +135,9 @@ import { StyleSheet, View, Dimensions } from "react-native";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
 import { GridComponent } from "echarts/components";
-import { SVGRenderer, SkiaChart } from "@wuba/react-native-echarts";
+import { SkiaRenderer, SkiaChart } from "@wuba/react-native-echarts";
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -195,7 +195,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, "light", {
-        renderer: "svg",
+        renderer: "skia",
         width: chartWidth,
         height: chartHeight,
       });
@@ -251,7 +251,7 @@ const styles = StyleSheet.create({
 | ------------------------ | -------------------------------- |
 | ![ios](./ios_rotate.gif) | ![android](./android_rotate.gif) |
 
-react-native-skiaを使用したい場合は、SvgChartをSkiaChartに置き換えてください。
+react-native-svgを使用したい場合は、SkiaChartをSvgChartに置き換えてください、そして、レンダラーとして「svg」を使用します。
 
 より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
 
diff --git a/...aurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md b/...aurus-plugin-content-docs/current/getting-started/write-a-dynamic-data-chart.md
@@ -419,7 +419,7 @@ const styles = StyleSheet.create({
 | ------------------------------ | -------------------------------------- |
 | ![ios](./dynamic-data-ios.gif) | ![android](./dynamic-data-android.gif) |
 
-react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください。
+react-native-skiaを使用する場合は、SvgChartをSkiaChartに置き換えてください、そして、レンダラーとして「skia」を使用します。
 
 より詳細なチャートの設定については、[echartsのドキュメント](https://echarts.apache.org/en/option.html#title)を参照してください。
 
diff --git a/...saurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md b/...saurus-plugin-content-docs/current/getting-started/write-a-simple-line-chart.md
@@ -8,20 +8,20 @@ sidebar_position: 3
 
 ブラウザでの表示を確認するには、[echartsエディター](https://echarts.apache.org/examples/en/editor.html?c=line-simple)にアクセスし、設定を変更して変化を確認してみてください。
 
-1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSVGRendererのみをインポートしています。
+1. echarts、@wuba/react-native-echarts、reactをインポートします。ここでは、SkiaChartとSkiaRendererのみをインポートしています。
 
 ```tsx
 import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 ```
 
 2. echarts.useを使用して、レンダラーとチャートを登録します。
 
 ```tsx
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 ```
 
 3. SkiaChartのためのrefを作成します。
@@ -57,7 +57,7 @@ const option = {
 
 ```tsx
 let chart = echarts.init(skiaRef.current, 'light', {
-  renderer: 'svg',
+  renderer: 'skia',
   width: 400,
   height: 400,
 });
@@ -79,9 +79,9 @@ import React, { useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import { GridComponent } from 'echarts/components';
-import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
+import { SkiaRenderer, SkiaChart } from '@wuba/react-native-echarts';
 
-echarts.use([SVGRenderer, LineChart, GridComponent]);
+echarts.use([SkiaRenderer, LineChart, GridComponent]);
 
 export default function App() {
   const skiaRef = useRef<any>(null);
@@ -104,7 +104,7 @@ export default function App() {
     let chart: any;
     if (skiaRef.current) {
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        renderer: 'skia',
         width: 400,
         height: 400,
       });
@@ -123,6 +123,6 @@ export default function App() {
 | --- | --- |
 | ![ios](./ios-line.png) | ![android](./android-line.jpg) |
 
-react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください。
+react-native-svgを使用する場合は、SkiaChartをSvgChartに置き換えてください、レンダラーとして「svg」を使用します。
 
 次に、@wuba/react-native-echartsで使用できるさまざまな設定を[echartsの例](https://echarts.apache.org/examples/en/index.html)から見つけることができます。
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json b/i18n/ja/docusaurus-plugin-content-docs/current/migration/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Upgrading",
+  "position": 6
+}