DEV Community: tony chen

Simplest Guide to DIY Your Own LLM Toy in 2024

tony chen — Tue, 02 Apr 2024 10:56:34 +0000

Find more resources at AI Toy

2024’s here, and DIY LLM toys? Totally a thing now. No tech wizardry needed, just your curiosity. I took the plunge, mixing a bit of coding with heaps of fun, and bam — created my own talking toy. If you’re up for crafting an AI buddy with ease, you’re in the right spot. Let’s demystify tech together and bring your AI friend to life. In a world where technology increasingly intersects with daily life, creating your own LLM toy not only demystifies AI but also provides a personalized gateway to the wonders of interactive technology.

Let’s take a look at the final effect first.

https://www.youtube.com/embed/FKEYL6VgHo4

Honestly, it's pretty awesome. Ready to start? Let's dive in!

How Does It Work?

There are three key steps:

Recording: Receive real-time recording data sent by the toy through UDP, and call the STT (Sound-To-Text) API to convert the sound into text.
Thinking: After receiving the previous text, the LLM (Large-Language-Model) API will be immediately called to obtain sentences generated by the LLM in a streaming manner. Then, the TTS (Text-To-Sound) API is called to convert the sentences into human speech.
Play audio: Toys will receive TTS (Text-To-Sound) audio file streams generated by the FoloToy Server and play them according to the order.

Preparation Before Development

Before you start making your LLM toy, it is crucial to understand the necessary hardware, software, and technical knowledge. This section will guide you in preparing all the essentials to ensure a smooth start.

Hardware

Folotoy Core: The ChatGPT AI Voice Conversation Core Board serves as the brain of your project, enabling voice interactions with AI.

Toy Components: Essentials like a microphone, speaker, buttons, switches, and power supply are necessary. I'm going with the Alilo Honey Bunny G6 for its ready-to-use setup.

Octopus Dev Suit (Other Chooise): Ideal for those looking to retrofit existing toys with AI capabilities.

When making a purchase, provide my promo code F-001–19 to receive a discount.

Server

Utilizing your own machine, like a MacBook Pro, ensuring that your toy has a reliable backend to process and respond to voice interactions. Alternatively, cloud services like Google Cloud Engine (GCE) can scale your project for broader applications.

Knowledge

Docker (required): Understanding Docker is crucial for deploying software in containers, making your project portable and scalable. I use it for start Folo server.
Git (required): Version control is essential for managing your project's codebase. I use it for managing the Folo server codebase.
MQTT (optional): If you're aiming for advanced customization, familiarity with MQTT (a lightweight messaging protocol) will be beneficial for communicating between the toy and the server.
EMQX (optional): Open-source MQTT broker for IoT, IIoT, and connected vehicles. Used for managing your toys.
ollama (optional): If you want to run large language models locally, it's a good chooise.

Services & Registration

To make your toy come to life, you'll need access to specific AI services. For this project, I've chosen to utilize OpenAI's offerings:

TTS (Text-to-Speech): OpenAI's Whisper service converts text responses from the AI into speech, making the interaction natural.
LLM (Large Language Model): Utilizing OpenAI's models for understanding and generating human-like text responses.
STT (Speech-to-Text): OpenAI's TTS service transcribes spoken words into text, allowing the AI to understand voice commands or queries.

The most important thing is that you need to register on the OpenAI platform and create a key, like sk-...i7TL.

Assemble Your Toy

Now it's time to put all the pieces together and make your own LLM toy.

https://www.youtube.com/embed/hR7V1izzeZw?si=T3cY8y4Oy2Bxkg0H

The general steps are as follows, it is recommended to watch the video tutorial first.

Check if the recording and playback of Alilo G6 are normal.
Use a screwdriver to unscrew the 6 screws on the back of Alilo G6.
Carefully open the casing of Alilo G6, unplug all plugs on the motherboard, first unplug the power plug, there is glue on the plug, you can use an art knife to gently cut it open, be sure not to cut your hand.
Unscrew the 4 screws on the motherboard and remove it.
Replace the original motherboard with FoloToy's motherboard and tighten 3 screws to fix it.
Plug in microphone, light, speaker and power sockets, finally plug in power socket.
After plugging in all sockets, do not close the casing or install screws yet. First turn on/off switch on rabbit's tail to see if newly installed light can turn on and flash slowly in blue color.
If there is no problem, install the casing and tighten screws to complete replacement process.

Set Up the Server

A strong backend support is key to making your LLM toys understand and respond to voice commands. This section will teach you how to clone the server code base, configure the server, and start Docker containers to ensure that your toys have stable backend support.

First clone the Folo server codebase from GitHub.

git clone git@github.com:FoloToy/folotoy-server-self-hosting.git

Then change the base server configuration in file docker-compose.yml to your own.

Name	Description	Example
OPENAI_OPENAI_KEY	Your OpenAI API key.	sk-...i7TL
OPENAI_TTS_KEY	Your OpenAI API key.	sk-...i7TL
OPENAI_WHISPER_KEY	Your OpenAI API key.	sk-...i7TL
AUDIO_DOWNLOAD_URL	The URL of the audio file.	http://192.168.x.x:8082
SPEECH_UDP_SERVER_HOST	The IP address of your server.	192.168.x.x

Then configure your roles in the config/roles.json file, here is a minimal example, for full configuration, please refer to the Folotoy documentation.

{
  "1": {
    "start_text": "Hello, what can I do for you?",
    "prompt": "You are a helpful assistant."
  }
}

Then start the Docker containers.

docker compose up -d

I run the Folo server in my own machine, if you want to run it in the cloud, almost the same. One thing to note is that you need to expose the port 1883, 8082, 8085, 18083 and 8083 to the public network.

For more information, please refer to the Folotoy documentation.

Chat with Your Toy

Once everything is ready, it's time to interact with your LLM toy.

Turn on the switch on the back of the toy to power it on. The blue blinking light in the ears indicates that the toy has entered pairing mode.

Turn on your phone or computer, and select the "FoloToy-xxxx" wireless network. After a moment, your phone or computer will automatically open a configuration page where you can set which WiFi network (SSID and password) to connect to, as well as the server address (like 192.168.x.x) and port number (keep the default 1883).

After the network is configured and connected to the server, press the big round button in the middle to start the conversation. After you stop speaking, FoloToy will emit a beep to indicate the end of the recording.

The 7 round small buttons around are role switching buttons. After clicking, the role switch takes effect.

Debugging

Whether it is a server or a toy, you may encounter some technical problems. This section will provide some basic debugging tips and tools to help you diagnose and solve possible problems and ensure that your LLM toys can run smoothly.

Server Debugging

To check the server logs, run the following command.

docker compose logs -f

LOG_LEVEL can be set in the docker-compose.yml file to control the log level.

Toy Debugging

Folo Toy provides a easy way to debug the toy base on USB serial port. You can use the Folo Toy Web Tool to debug the toy.

Connect the toy with your computer using a USB cable.
Open the Folo Toy Web Tool, and then click the "Console" button to connect to the toy.
Once connected, you should be able to see real-time logs from your device in the console.

Also there is a LED on the toy, it will light up in different colors to indicate the status of the toy.

MQTT Debugging

Open the EMQX Dashboard to check the MQTT messages. The default username is admin and the password is public. Anyways, change the password to a secure one after you log in.

Advanced Customization

For advanced users who want to further explore and customize their LLM toys, this section will introduce how to locally run large language models, use tools such as CloudFlare AI Gateway, and customize the voice of characters. This will open up a broader world of DIY LLM toys for you.

Run LLM Locally

Running large language models locally is a interesting thing. You can run Llama 2, Gemma and all kinds of open-source large models from around the world, even models trained by yourself. Using ollama, you can do it easily. Install ollama first, and then run the following command to run the Llama 2 model.

ollama run llama2

Then, change the role configuration to use the local LLM model.

{
  "1": {
    "start_text": "Hello, what can I do for you?",
    "prompt": "You are a helpful assistant.",
    "llm_type": "ollama",
    "llm_config": {
      "api_base": "http://host.docker.internal:11434",
      "model": "llama2"
    }
  }
}

The api_base should be the address of your ollama server address, and don't forget to restart the Folo server to make the changes take effect.

docker compose restart folotoy

That's all, change model to Gemma or other models as you like, and enjoy it.

Use CloudFlare AI Gateway

Cloudflare’s AI Gateway allows you to gain visibility and control over your AI apps. By connecting your apps to AI Gateway, you can gather insights on how people are using your application with analytics and logging and then control how your application scales with features such as caching, rate limiting, as well as request retries, model fallback, and more.

First, you need to create a new AI Gateway.

Then edit the docker-compose.yml file to change OPENAI_OPENAI_API_BASE to the address of your AI Gateway, like this:

services:
  folotoy:
    environment: OPENAI_OPENAI_API_BASE=https://gateway.ai.cloudflare.com/v1/${ACCOUNT_TAG}/${GATEWAY}/openai

Then you have a dashboard to see metrics on requests, tokens, caching, errors, and cost.

And a logging page to see individual requests, such as the prompt, response, provider, timestamps, and whether the request was successful, cached, or if there was an error.

That's fantastic, isn't it?

Role Voice Costomization

You can customize the voice of the role by changing the voice_name field in the role configuration file.

{
  "1": {
    "tts_type": "openai-tts",
    "tts_config": {
      "voice_name": "alloy"
    }
  }
}

Find the voice you like in the OpenAI TTS Voice List.

Edge tts has many voices to choose from, enjoy it like this:

{
  "1": {
    "tts_type": "edge-tts",
    "tts_config": {
      "voice_name": "en-NG-EzinneNeural"
    }
  }
}

Knowledge base support

For higher levels of customization, such as knowledge base support. It is recommended to use Dify, which combines the concepts of Backend as Service and LLMOps, covering the core technology stack required to build generative AI native applications, including a built-in RAG engine. With Dify, you can self-deploy capabilities like Assistants API and GPTs based on any model.

Let’s focus on the built-in RAG engine, which is a retrieval-based generative model that can be used for tasks such as question and answer, dialogue, and document summarization. Dify includes various RAG capabilities based on full-text indexing or vector database embedding, allowing direct upload of various text formats such as PDF and TXT. Upload your knowledge base, so you don’t have to worry about the toy making nonsense because you don’t know the background knowledge.

Dify can be deployed by itself or use the cloud version directly. The configuration on Folo is also very simple:

{
  "1": {
    "llm_type": "dify",
    "llm_config": {
      "api_base": "http://192.168.52.164/v1",
      "key": "app-AAAAAAAAAAAAAAAAAAa"
    }
  }
}

Custom toy shape

In terms of working principle, any toy can be modified. Folo Toy also offers the Octopus AI Development Kit, which can transform any ordinary toy into an intelligent talking toy. The chip is small and lightweight and can easily fit into any type of toy, whether plush, plastic, or wooden.

I DIYed a Shaanxi-speaking cactus. Use your imagination, you can put it into your favorite toys, and it’s not particularly complicated to do it:

open the toy
Put the Octopus AI development kit into it
close the toy

The server still uses the same one. You can assign different roles to different toys through sn, which will not be expanded here. You can check the configuration document on the official website.

Security Notes

Please note, never put the key in a public place, such as GitHub, or it will be abused. If your key is leaked, delete it immediately on the OpenAI platform and generate a new one.

You can also use environment variables in docker-compose.yml and pass them in when starting the container, so as to avoid exposing the key in the code.

services:
  folotoy:
    environment:
      - OPENAI_OPENAI_KEY=${OPENAI_OPENAI_KEY}

OPENAI_OPENAI_KEY=sk-...i7TL docker compose up -d

In case you wish to make FoloToy Server publicly available on the Internet, it is strongly recommended to secure the EMQX service and allow access to EMQX only with a password. Learn more about EMQX Security.

Conclusion

Crafting your own LLM toy is an exciting journey into the world of AI and technology. Whether you're a DIY enthusiast or a beginner, this guide provides the roadmap to create something truly interactive and personalized. If you encounter challenges acquiring the Folotoy Core or face any issues along the way, joining our Telegram group offers community support and expert advice.

For those preferring a ready-made solution, the finished product is available for purchase here. This option delivers the same interactive experience without the need for assembly. Folo toys also offer many other products which can be found here. This is their store address: https://folotoy.taobao.com/

Purchase Folo Toy products now and enjoy discounts by providing my promo code, F-001–19, when contacting customer service. You can save 20 RMB on the Fofo G6, 15 RMB on the Octopus Dev Suit, and 10 RMB on the Cactus. Most other items also qualify for a 10 RMB discount, but please contact customer service to inquire.

Embark on this creative venture to bring your AI companion to life, tapping into the vast potential of LLM toys for education, entertainment, and beyond.

Reference Links:

React Native ECharts VS Victory Native VS React Native Chart Kit, Which solution is better?

tony chen — Mon, 12 Jun 2023 08:22:12 +0000

Introduction: In modern mobile application development, data visualization is a crucial part. Chart libraries play a key role in React Native applications, helping developers present and analyze data visually. There are many excellent chart libraries available in the React Native ecosystem. In this article, we will compare three popular chart libraries in the React Native community. Let's begin this comparative journey to delve into the differences between React Native ECharts, Victory Native, and React Native Chart Kit.

Chart Library Introduction

React Native Chart Kit

React Native Chart Kit was developed in 2018, it has been 5 years since its inception. With a cumulative download count of 2,840,757, it has garnered 2.5k+ stars on GitHub. It has become a highly popular library in the React Native community.

Victory Native

Victory Native is a chart library that was developed in 2015. It has been 7 years since its inception. With a high cumulative download count of 7,434,044, it has garnered an impressive 10.3k+ stars on GitHub. It is the longest-standing and most widely used chart library in the history of React Native.

React Native ECharts

React Native ECharts is a newly released chart library this year. It currently has 2,565 downloads and has received 363 stars on GitHub. As a rising star among React Native chart libraries, it holds great potential. With time, it is believed that React Native ECharts will become one of the most popular chart libraries.

Here is the comparison table for the basic data:

Comparison of Basic Principles

React Native Chart Kit
The main approach is to utilize React Native's native view components to create the basic structure and layout of the charts, such as View, Text, etc. Additionally, libraries like react-native-svg and paths-js are used for rendering the charts with vector graphics.
Victory Native
also relies on React Native's native views combined with SVG for rendering. It also draws inspiration from D3 (Data-Driven Documents) by mapping data to chart elements and using scales to transform data values and positions.
React Native ECharts
fetches the SVG graphic data of ECharts charts and rewrites the SVGPainter of ECharts. By utilizing the existing chart data of ECharts, it renders the charts on the React Native side using either react-native-svg or react-native-skia.

Code Writing Comparison

Let's take the commonly used area chart as an example. Now, let's see how they are implemented using the following code snippets:

React Native Chart Kit

import { LineChart } from"react-native-chart-kit";
import { StyleSheet, View, Text } from 'react-native';
const chartConfig = {
    backgroundGradientFrom: "#fff",
    backgroundGradientFromOpacity: 0,
    backgroundGradientTo: "#fff",
    backgroundGradientToOpacity: 0.5,
    color: (opacity = 1) => `rgba(14, 17, 22, ${opacity})`,
    strokeWidth: 2, // optional, default 3
    barPercentage: 0.5,
    useShadowColorFromDataset: false // optional
};
export const LineChart1 = props => {
    const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // labels: props.date,
        datasets: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            // color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
            strokeWidth: 2 // optional
          }
        ],
      };
    return (
        <View style={styles.container}>
            <Text>React Native Chart Kit</Text>
            <LineChart
                data={data}
                width={400}
                height={200}
                yAxisInterval={1}
                animate
                chartConfig={chartConfig}
                withDots={false}
            />
      </View>
    )

}

Victory Native

import { StyleSheet, View, Text } from "react-native";
import {
  VictoryArea,
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryScatter,
} from "victory-native";

export const LineChart2 = props => {
  const data = [
      { x: 'Mon', y: 150 },
      { x: 'Tue', y: 230 },
      { x: 'Wed', y: 224 },
      { x: 'Thu', y: 218 },
      { x: 'Fri', y: 135 },
      { x: 'Sat', y: 147 },
      { x: 'sun', y: 260 },
    ];
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Victory Native</Text>
      <VictoryChart
        theme={VictoryTheme.material}
        height={250}
        width={400}
      >
        <VictoryArea
          style={{ data: { fill: "rgba(230, 231, 231,0.8)" } }}
          data={data}
          animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
          }}
        />
        <VictoryLine
          data={data}
          style={{ data: { stroke: "#d6d6d7", strokeWidth: 2 } }}
        />
        <VictoryScatter
          data={data}
          size={4}
          style={{ data: { fill: "#24262a" } }}
        />
      </VictoryChart>
    </View>
  );
};

React Native ECharts

import { StyleSheet, Text, View } from 'react-native';
import { 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';
echarts.use([SVGRenderer, LineChart, GridComponent]);
export const LineCharts = props => {
  const skiaRef = useRef(null);
  useEffect(() => {
    const option = {
      xAxis: {
        type: 'category',
        data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },}
      },
      yAxis: {
        type: 'value',
        min: 'dataMin',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },}
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          areaStyle: {
            color: 'rgba(230, 231, 231,0.8)'
          },
          lineStyle: {
            color: '#d6d6d7'
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#24262a',
          },
        },
      ],
    };
    let chart;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: 400,
        height: 300,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);
  return (
    <View style={styles.container}>
        <Text style={styles.title}>React Native ECharts</Text>
        <SkiaChart ref={skiaRef} />
    </View>
  );
}

The effect is displayed as follows:

From a code-writing perspective, Victory Native is data-driven, so you typically pass in data and configure related styles through props. Most importantly, it acts more like a set of tools that you can DIY. You can use various components exposed by Victory to customize the charts according to your needs. For example, if you want to add a line and data points to the area chart, you would need to additionally include VictoryLine and VictoryScatter components.

React Native Echarts and React Native Chart Kit are similar in usage. Both libraries centralize data and styles within the configuration options. They are more like fully featured tools that allow you to transform the charts by modifying the configurations. Comparatively, the configuration code for React Native Chart Kit is simpler, but it may lack some advanced customization options. For example, enabling animation or setting a specific starting value for the y-axis might not be achievable.

In terms of writing code, I prefer the configuration-based approach. It is straightforward, easy to grasp, and can improve development efficiency for developers.

Development Experience

Comparison of Rendering Performance

When it comes to regular charts such as area, bar, and pie charts, all three libraries perform well with small datasets, providing smooth rendering. However, as the data size reaches the order of thousands, noticeable performance differences become apparent. Victory Native and React Native Chart Kit experience significant lags and, in the case of larger datasets, Victory may even crash. On the other hand, React Native ECharts benefits from ECharts' default data sampling mechanism, which reduces the number of data points when rendering large amounts of data. This helps avoid overcrowding the chart and performance degradation. ECharts automatically sample a relatively small number of data points based on the width of the plotting area and the number of data points, reducing computational and rendering time. Leveraging this mechanism, React Native ECharts demonstrates significantly better rendering performance when dealing with large datasets.

Here is an example of rendering an area chart using randomly generated 200 data points:

As we can see, React Native ECharts still maintain relatively good rendering performance. On the other hand, adjustments to data and coordinates are required when using the other two libraries to meet specific business requirements.

When we increase the test data to 2000 points, React Native Chart Kit exhibits noticeable rendering lag, while Victory Native throws an error stating Maximum call stack size is exceeded. Meanwhile, React Native ECharts, benefiting from data sampling, still deliver satisfactory rendering results:

Comparison of Chart Variety

React Native Chart Kit Currently, React Native Chart Kit supports a relatively limited number of chart types. It mainly covers six specific types of charts, which can fulfill most basic business requirements. However, if there is a need for other types of charts, additional libraries may need to be introduced.

The following image shows most of the chart types that React Native Chart Kit can cover, and it can be seen that the variety is relatively limited. 😭 Currently, the developers are continuously maintaining the library and may add more chart types in the future.

(Image source: https://github.com/indiespirit/react-native-chart-kit)

Victory Native When it comes to chart variety, Victory Native offers a greater range compared to React Native Chart Kit. However, due to the nature of Victory's approach, which involves assembling components to create different types of charts, developers need to have a good understanding of component composition and possess solid coding skills. Additionally, the examples provided on the official Victory website may not be beginner-friendly, as the supported chart instances may not be immediately intuitive. Overall, using Victory Native requires a higher level of coding proficiency and logical thinking.

The following image showcases the main components provided by Victory on their official website. It can be observed that there are significantly more options available compared to React Native Chart Kit. Moreover, Victory Native primarily relies on combining these components, such as points, lines, areas, and axes, to create various types of charts. This allows for a broader range of supported chart types.

(Image source: https://formidable.com/open-source/victory/docs/)

React Native ECharts You can directly refer to the examples on the ECharts official website, where various types of charts are showcased in a highly intuitive manner. Developers can use the configuration options to customize the charts according to their needs. Currently, React Native ECharts supports rendering most of the chart types that ECharts offers.

React Native ECharts utilizes the SVG data from ECharts, which means users can render a wide range of different chart types by simply following the examples provided on the ECharts website and configuring their settings😍

(Image source: https://echarts.apache.org/examples/zh/index.html)

The following image showcases some chart types that cannot be easily implemented or require complex combinations using other libraries. However, with React Native ECharts, you can effortlessly achieve these charts by referring to the documentation🚀

Comparison of Guide

Getting started with React Native Chart Kit primarily involves using the documentation and configuration options provided by the library's authors, which can be found on GitHub or npm. By referring to these resources, developers can easily implement chart rendering in their projects.

On the other hand, Victory Native has its website, where developers can assemble charts by referring to the provided components and related code in the documentation. However, the website offers a large number of components and elements, making it difficult for developers to quickly find the desired examples. Implementing complex charts often requires developers to think of their implementation methods, which can lower development efficiency.

Compared to Victory Native and React Native Chart Kit, React Native ECharts has several advantages:

Documents

The description provided in the official documentation of Victory Native is more clear, comprehensive, and provides ready-to-use examples. Developers can easily understand the library's features, configurations, and usage through the documentation. Additionally, there are numerous usage examples available on the official ECharts website, which further assists developers in quickly implementing various types of charts.
Online Preview

Just like the ECharts library, React Native ECharts provides an online preview and testing support. You can directly copy the chart configuration to see how it renders in React Native. Click here for an online preview
Multiterminal code

React Native ECharts also support component reuse on the web, enabling cross-platform requirements and achieving code sharing across multiple platforms. It effortlessly achieves code uniformity and ensures consistency of charts across different platforms, thus enhancing our development efficiency.
Support for two rendering modes

React Native ECharts supports two rendering modes: Svg and Skia. It is implemented based on react-native-svg and react-native-skia. react-native-skia utilizes the Skia Graphics Library, which is a high-performance graphics rendering engine that provides faster drawing and rendering speeds. It is a boon for developers who want to experience Skia's capabilities.

Conclusion

Finally, let's compare the performance of these three chart libraries from the following perspectives:

It is undeniable that both Victory Native and React Native Chart Kit are excellent chart libraries for React Native. However, the newly introduced React Native ECharts has certain advantages in terms of applicability and ease of entry. Especially in some relatively complex but common charts, such as path charts, radar charts, and candlestick charts, React Native ECharts provides examples that allow developers to easily implement them by simply modifying the data in the example code. In these scenarios, React Native ECharts is highly recommended as it greatly improves development efficiency. Additionally, for projects with a high demand for various types of charts, the rich collection of chart examples provided by React Native ECharts makes it easier for us to handle diverse chart requirements😁

Author: xuanweiH

Revolutionizing Data with React Native ECharts 1.1: Now More Interactive!

tony chen — Mon, 29 May 2023 05:04:08 +0000

We are excited to release a stable version of React Native ECharts 1.1. In the new version, we have added support for the react-native-gesture-handler gesture solution, among other enhancements. Read on to learn more!

@wuba/react-native-echarts, An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions. If you want to learn more about the project's design principles, you can click here.

To provide a more intuitive and accurate understanding of the project's features, we have decided to officially rename the initial version wrn-echarts to @wuba/react-native-echarts. In the new version.

The project source code is available at https://github.com/wuba/react-native-echarts.

Features

Rich Chart Types Supported

@wuba/react-native-echart is a solution that brings the ECharts charting library into React Native applications. It utilizes the rendering capabilities of React Native's native components, resulting in a significant improvement in rendering speed. It supports a wide range of commonly used chart types, including line charts, area charts, bar charts, and scatter plots, as well as more complex charts such as candlestick charts and heat maps. It can fulfill various visualization requirements in different scenarios.

Here are some examples of common chart types:

In addition to the usual chart types, @wuba/react-native-echart supports a variety of other graphs, such as tree, heat and K-line charts, with excellent rendering performance.

In addition, we provide comprehensive support for various dynamic charts, and here are some examples. Chart 1 and Chart 2 demonstrate the dynamic changes in per capita income across multiple countries. Chart 1 presents the growth trend of per capita income over the past 70 years, while Chart 2 showcases the dynamic sorting of per capita income for 10 countries in the year 1982. Chart 3 displays a continuously updated speedometer that adapts to changing values over time, and Chart 4 demonstrates a dynamic node addition chart. These charts can dynamically re-render based on evolving data. Regardless of the data update frequency, they consistently deliver outstanding rendering performance.

@wuba/react-native-echart supports a wide range of chart types, but they are too numerous to display here. If you want to explore more comprehensive chart types, you can visit the taro-playground repository to check them out. There, you will find example demos showcasing various ECharts chart types.

Svg and Skia Supported

@wuba/react-native-echart supports two rendering modes: Svg and Skia. It is implemented based on react-native-svg and react-native-skia. How do you choose between the two rendering modes? From the perspective of rendering speed, Svg and Skia have similar performance, as shown in the following figure. However, it's important to note that Skia rendering has some limitations in terms of Chinese language support. To display Chinese characters correctly, you need to set up fonts separately. Therefore, when choosing a rendering library, please consider the language requirements of your project and the importance of Chinese language support. We recommend selecting the appropriate rendering mode based on specific circumstances to achieve optimal performance and user experience.

Support various gestures

Support for various gestures such as tapping, dragging, and scaling is available. By default, we use the built-in PanResponder from React Native to handle these gestures. Starting from version 1.1, we have added support for the react-native-gesture-handler library. If you have already integrated this gesture library into your project, we recommend using it directly to handle gestures for enhanced performance and user experience.

Below is a comparison of the two gesture solutions. Judging from the smoothness of chart scrolling, both the default gesture handling and the use of react-native-gesture-handler provide excellent fluidity. You can choose the approach that best suits your needs.

Web Support

We also support reusing the components of @wuba/react-native-echart in the web environment to meet cross-platform requirements and achieve code sharing across multiple platforms. This enables easy code unification, ensures consistency of charts across different platforms, and enhances our development efficiency.

ECharts, the charting library, provides a wide range of online rendering examples for the web. But how well does it perform on React Native? To address this, we offer corresponding online preview and testing support. You can directly copy the chart configuration to see how it renders on React Native. Online preview click here

Roadmap

Despite our already extensive and well-rounded support for ECharts, we are committed to further optimizing and enhancing it. In our upcoming work, we will focus on improvements and enhancements in the following areas to deliver even more refined functionality. Click here to see more detailed information and progress updates.

Performance Enhancement

Compared to the rendering solution using Webview, @wuba/react-native-echart has achieved significant improvements in overall rendering performance. However, there is still room for further improvement in rendering speed and memory usage when dealing with large data sets. We are committed to optimizing performance in handling large data sets to ensure exceptional performance and stability in various complex data scenarios.

Known Issue Fixes

Currently, the support for the ECharts charting library is very comprehensive. However, there are still some issues that need to be improved in some chart rendering, such as not supporting map display and incorrect image display in Skia rendering mode. We take these issues very seriously and will continue to work on fixing them. to provide a better chart presentation experience.

ECharts GL Supported

With the widespread application of 3D visualization in various business scenarios, such as the displayed 3D chart below, we will continue to explore and enhance our support for ECharts GL to meet more business needs. You can click here to check the latest progress.

Improve the Infrastructure

In the future, we will continue to improve the infrastructure by refining test cases, adding user use cases and other content. Standardized test cases can check whether any changes made during the development process have an impact on other functions. We will gradually add more test cases, standardize the code and improve the quality of the code.

Acknowledgments

We are deeply grateful to all our friends in the @wuba/react-native-echarts open-source community. Whether you have contributed to the codebase, provided bug reports along with contextual information, or shared ideas to enhance existing features, your contributions have been incredibly valuable to this project. We wholeheartedly welcome you to join us and actively participate in the project's discussions and collaborative development.

Lastly, we would like to express our special thanks to the developers who have contributed to the project's success:

Author: yechunxi

React Native ECharts 1.1 Released !

tony chen — Mon, 29 May 2023 03:00:07 +0000

The project source code is available at https://github.com/wuba/react-native-echarts.

Features

Rich Chart Types Supported

Here are some examples of common chart types:

In addition to the usual chart types, @wuba/react-native-echart supports a variety of other graphs, such as tree, heat and K-line charts, with excellent rendering performance.

Svg and Skia Supported

Support various gestures

Web Support

Roadmap

Performance Enhancement

Known Issue Fixes

ECharts GL Supported

Improve the Infrastructure

Acknowledgments

Lastly, we would like to express our special thanks to the developers who have contributed to the project's success:

Author: yechunxi

Can GPT Outshine Human Developers? A Gesture Handling Adventure in the React Native ECharts Project

tony chen — Mon, 24 Apr 2023 10:47:02 +0000

Abstract: In this article, we explore the potential of using OpenAI’s GPT-4 to assist in maintaining and improving open-source projects. We focus on a case study involving integrating React Native gesture handling and discuss GPT’s capabilities in answering questions, code generation, documentation, and more. We also share valuable lessons learned throughout the development process.

Introduction

React Native ECharts is a React Native library for displaying ECharts charts, I am the maintainer of the open-source project. Open-source projects are essential to the software development ecosystem, providing invaluable resources and tools for developers. However, maintaining and improving these projects can be challenging, particularly as they grow in size and complexity.

In this article, we’ll explore how GPT, a powerful language model developed by OpenAI, can assist in maintaining open-source projects while making the journey enjoyable and engaging. We’ll focus on a case study involving React Native gesture handling and examine GPT’s capabilities in answering questions, code generation, documentation, and more.

I will give my subjective feeling score out of 10 in the dimension of intelligent performance.

Answering Questions

Intelligent performance: 10.

Initially, there was a discussion on the project issue about using RNGH instead of PanResponder. The PanResponder worked fine, and the issue was shelved after that. An issue like this in open-source projects may stay on the shelf forever if no one remembers it.

It would be fascinating to have GPT answer the question for us. I pasted the issue content and all the comments into ChatGPT and asked it how it would answer the question. I was very impressed with its response. It expressed appreciation for the feedback, introduced and compared PanResponder and react-native-gesture-handler, and suggested solutions like a veteran open-source project author. My only complaint is that the text could be more concise.

Here is the answer:

Thank you for your suggestion; we greatly appreciate feedback from developers. We will seriously consider your recommendation to replace React Native’s built-in PanResponder with react-native-gesture-handler (RNGH). Allow me to first explain the advantages of these two libraries.

PanResponder is a gesture handling library built into React Native. It can handle various gesture actions and is tightly integrated with the React Native framework. However, PanResponder’s functionality is relatively limited, and it may not be sufficient for some complex gesture operations.

On the other hand, react-native-gesture-handler is an independent gesture handling library with richer features and better performance. Its advantages include:

More accurate gesture recognition and handling: RNGH can more accurately recognize and handle various gestures, improving the interactivity of applications.
Better performance: RNGH outperforms PanResponder, especially when dealing with a large number of gesture operations.
Better cross-platform compatibility: RNGH supports more platforms, including iOS and Android.
More flexible API: RNGH provides a richer API, allowing developers to customize gesture handling logic.

Given these advantages, we will seriously consider replacing PanResponder with react-native-gesture-handler. We will evaluate our existing code to determine the cost of replacement and potential issues. Additionally, we will consider offering react-native-gesture-handler as an option, allowing developers to choose the gesture handling library according to their needs.

Please give us some time to assess this suggestion. In the meantime, if you have any recommendations or ideas regarding the implementation process, feel free to comment on this issue. We will respond and make a decision as soon as possible. Thank you again for your suggestion!

ChatGPT has proven to be a valuable resource when it comes to answering questions, as it can quickly respond and accurately understand the context of the problem. However, it’s essential to provide enough background information for the model to generate a more accurate answer.

Coding

Intelligent performance: 6.

Next, I tried having ChatGPT help write the code. Due to context size constraints, I simplified the task into 2 steps:

Convert the gesture handling code originally implemented using PanResponder to be handled by react-native-gesture-handler.
Allow users to choose to use PanResponder or react-native-gesture-handler by configuring the props. React-native-gesture-handler is an optional dependency and relegated to PanResponder if it is not installed.

First, I posted the full code for handling gestures using PanResponder to ChatGPT and asked it to convert it to the react-native-gesture-handler version.

It quickly gave me the converted code, explained the code and gave instructions on how to use it, which looked very smart and fast. I took the explained part of the code as follows:

In this rewritten version, we imported react-native-gesture-handler and used PanGestureHandler and PinchGestureHandler. we created a component called GestureHandler that associates the gesture handler with the corresponding event handler We create a component called GestureHandler that associates the gesture handler with the corresponding event handler. This component takes a zrenderId prop and a children prop. children can be any React component that requires gesture handling.

The original PanResponder instance is replaced with a PanGestureHandler, and the onGestureEvent and onHandlerStateChange events are used to handle gesture changes. For the zoom function, we introduce the PinchGestureHandler and set up an onPinchGestureEvent event handler for it. These two handlers are responsible for handling dragging and zooming gestures respectively.

To handle both dragging and zooming gestures, we use the simultaneousHandlers property so that the PanGestureHandler and PinchGestureHandler can handle gestures at the same time.

Now, to apply gesture processing to a component, simply wrap the GestureHandler component around that component and pass it the zrenderId.

After simply handling type errors and minor bugs, it works, which is astounding, and if I were to write it myself, this would probably take an hour!

But! After I checked the documentation for react-native-gesture-handler, I found out that:

PanGestureHandler and PinchGestureHandler are both soon to be deprecated APIs, and we are officially advised to use the new gestures API.

Of course, this is understandable, as the knowledge base deadline for ChatGPT is September 2021, when things were different.

I tried to get it coded using the new gestures API. Unfortunately, without that part of the knowledge, it then started guessing how to use the new API, and not correctly.

When doing anything with ChatGPT assistance, you need to maintain a certain level of skepticism. Here is the wrong code:

// ...
import { PanGesture, PinchGesture } from 'react-native-gesture-handler';
// ...
export const GestureHandler = ({ zrenderId, children }) => {
  const panRef = useRef();
  const pinchRef = useRef();
  const onPanGestureEvent = useMemo(
    () => ({ nativeEvent }) => {
      dispatchEvent(zrenderId, ['mousemove'], nativeEvent, 'change');
    },
    [zrenderId]
  );

  const onPanStateChange = useMemo(
    () => ({ nativeEvent }) => {
      const { state } = nativeEvent;

      if (state === 'began') {
        dispatchEvent(zrenderId, ['mousedown', 'mousemove'], nativeEvent, 'start');
      } else if (state === 'end') {
        dispatchEvent(zrenderId, ['mouseup', 'click'], nativeEvent, 'end');
      }
    },
    [zrenderId]
  );

  // const onPinchGestureEvent = ...

  return (
    <PanGesture
      ref={panRef}
      simultaneousHandlers={pinchRef}
      onGestureEvent={onPanGestureEvent}
      onStateChange={onPanStateChange}
    >
      <PinchGesture
        ref={pinchRef}
        simultaneousHandlers={panRef}
        onGestureEvent={onPinchGestureEvent}
      >
        {children}
      </PinchGesture>
    </PanGesture>
  );
};

Then I posted the demo and documentation for the use of panGesture and pinchGesture in the new gestures API to it and had it regenerate the code. After a few rounds of tweaking, I finally got the code working and it just needed a few simple tweaks to get it working. Its ability to understand and learn from unknown knowledge is also great.

Immediately after, I told it I wanted react-native-gesture-handler to be optional to install, and ChatGPT behaved very usefully.

After a more detailed test, there were still some bugs, and I still asked ChatGPT to help me solve them. The whole process was not smooth, but it was still useful to help me locate the problems quickly and provide coding suggestions.

For example, I found in my testing that the onStart event of panGesture was triggered late. ChatGPT told me that it might be because react-native-gesture-handler needs to collect enough gesture information to determine whether the gesture has been recognized. There is a delay in this process. To solve this problem, we can try using onBegin instead of onStart, since onBegin is triggered when the gesture handler starts receiving touches. The corresponding code is also provided, as well as the possible risks associated with it, which was very helpful to me.

Overall, when you can clearly describe your requirements, such as decomposing the task well and providing enough complete background knowledge, ChatGPT will be a handy assistant for you.

Summary Modification

Intelligent performance: 9.

The whole process is done through dialogue, so we can summarize the information easily. Here is the summary provided by ChatGPT, which can be used directly after a few modifications.

Commit message:

feat: Add support for optional use of react-native-gesture-handler

PR description:

This PR adds support for the optional use of `react-native-gesture-handler` in the project. Users can now choose to use `react-native-gesture-handler` for handling gestures by specifying the `useRNGH` parameter. When `react-native-gesture-handler` is not installed or `useRNGH` is set to `false`, the component will gracefully fall back to using the built-in pan gesture.

Changes include:
- Update gesture configuration to use `runOnJS(true)` for callbacks to run on the JS thread.
- Add a `useRNGH` parameter to control whether to use `react-native-gesture-handler` or the built-in pan gesture.
- Handle cases where `react-native-gesture-handler` is not installed, and use the built-in pan gesture as a fallback.
- Update example code with the new configuration options.

This update improves the flexibility of the component and allows users to choose the best gesture handling option for their specific use case.

Working with ChatGPT to write the PR description and commit message was a smooth experience. By providing clear instructions and input, the model generated concise and informative content that accurately reflected the changes made in the project.

Generate Documents

Intelligent performance: 9.

You can also use ChatGPT to generate usage documentation, which is also very convenient and will not be detailed here. Here is the modified documentation for using RNGH in @wuba/react-native-echarts.

Writing a Blog Post

Intelligent performance: 7.

As the final step in the process, I asked ChatGPT to help me write a blog post documenting the entire experience. This blog post is the result of that collaboration, showcasing how ChatGPT can be used to draft coherent and engaging content.

Guess how much of the content here is generated by ChatGPT. 😄

Conclusion

Throughout the development process, I learned several important lessons about using ChatGPT for software development:

Breaking tasks into smaller steps can significantly improve efficiency.
The knowledge database of ChatGPT can be outdated, so providing the relevant information is crucial for obtaining accurate code samples.
While ChatGPT is helpful for textual tasks, it still cannot replace human expertise when it comes to actual coding.
ChatGPT acts like a highly intelligent assistant, offering valuable consultation and advice throughout the project.

In conclusion, AI language models like ChatGPT have immense potential to assist developers in various tasks, from planning and coding to documentation and content creation. As AI technology continues to advance, we can expect even more powerful and versatile tools that can further streamline the software development process and improve the overall efficiency of developers.

Finally, if you want to draw cool charts in your react native application, try our project.

Building a Modern Document Website for React Native Library Like React Native ECharts

tony chen — Mon, 27 Mar 2023 03:09:02 +0000

We're excited to announce that the official website for React Native Echarts has launched.!

We're constantly updating the site to provide you with the latest information about our project. On the website, you will find the complete documentation, edit demos online, and view solutions to common issues and other related information.

New Logo & Design

We've designed a logo that reflects our project's key features: efficiency, simplicity, and technology. The logo is based on a polar coordinate bar chart and has been transformed into a modern and technological style.

Hope you like it!

Building a Modern Document Website for React Native Library

In addition to the website launch information, I will also describe how to build a modern documentation website. If you're interested in building a documentation website for your open-source project, this guide can be a great reference.

Initialized with Docusaurus

To build a modern documentation website, the first step is to use Docusaurus to initialize your project. Docusaurus provides a framework for building documentation websites quickly and easily. You can initialize your project with the following command.

npx create-docusaurus@latest my-website classic --typescript

For more information, please refer to Docusaurus Getting Started.

Ember Expo Snack

Expo Snack is an open-source platform for running React Native apps in the browser. If you are building a website for a React Native library, this is an excellent feature that helps developers easily try out and test their code without having to download anything locally.

Integrating Snack in a Docusaurus project can be challenging. I refer to this issue and the source code at react-native-website.

Integrating Snack involves the following steps.

Write a remarkPlugins call @react-native-website/remark-snackplayer. This plugin will visit all code nodes with node.lang == 'SnackPlayer' when compiling markdown files, and replace the node with a SnackPlayer div.
Write a client module call snackPlayerInitializer. This module listens for client-side events and call initSnackPlayers, updateSnacksTheme at the appropriate time.
Modify the a configuration file docusaurus.config.js, add @react-native-website/remark-snackplayer to remarkPlugins, add snackPlayerInitializer to clientModules, and add https://snack.expo.dev/embed.js to scripts.
In the src/css/custom.css file, define some styles for snack-player.

Write code in a markdown file with a code block.

SnackPlayer name=Hello%20World
import { Text } from 'react-native';
export default function() {
  return (
    <Text>Hello, world!</Text>
  );
}

Now you have an online editor, like the one below.

If you are interested in the implementation principles, you can take a look at our commit as well as Including Snacks in your documentation.

Use a SnackPlayer Component

Ember Expo Snack is cool, but sometimes I want to put the code in a tsx file and then import it to the article where I need it. In this way, my code is easier to edit and reusable.

In addition to the online editor, we provide a SnackPlayer component that can be used like below.

import SnackPlayer from '@site/src/components/SnackPlayer';
import SimpleLineChart from '!!raw-loader!@site/src/snippets/simple-line-chart/index.tsx';

<SnackPlayer name="Simple Line Chart">{SimpleLineChart}</SnackPlayer>

Thanks to Webpack raw-loader, you can import any code file as raw text, and then insert it in a code block. This component is also very simple to implement, accepting snack-related props and code string, and turning them into SnackPlayer div, refer to this commit.

You can now use @wuba/react-native-echarts online, try it out now. We plan to provide more use cases in the future.

If you want to customize your own components, please refer to Using JSX in Markdown.

By the way, if you just want to have a live editor for react, React Live is a good choice.

Add Doc Search

Algolia is a search engine that can be integrated into your Docusaurus project to provide fast and efficient search functionality for your documentation website. This feature helps users quickly and easily find the information they need.

It's easy to integrate Algolia with Docusaurus. You can refer to Docusaurus Doc Search for more information.

I18n Support

With the increase of international users, supporting multiple languages is becoming increasingly important. Docusaurus provides i18n support to help you create a website that can be easily translated into different languages.

Currently, we have only added 2 languages, Chinese and English, if you have other needs, please let us know.

For more information, please refer to Docusaurus i18n.

Show Github Contributes

It's always important to give credit where credit is due. Showing the contributors of your project on your documentation website is a great way to acknowledge their hard work and dedication.

We build a react-native-echart team on https://opencollective.com/ and associate the team with the GitHub repository.

You can then get the contributor images for the project by assembling the following link:

https://opencollective.com/react-native-echarts/contributors.svg?button=false

Thanks to the following contributors, if you want to join us, please feel free to submit a PR or issue.

Deploying Your Website

Use GitHub Pages to Deploys

Deploying your website is an important step in making it accessible to the public. Docusaurus makes it easy to deploy your website using GitHub Pages. This is a fast and efficient way to get your website online quickly.

For more information, please refer to Docusaurus Deploying to GitHub Pages.

Increase Website Traffic

Add Global Site Tag for Analytics

To better understand how users interact with our website, we can use Google Analytics to track various metrics such as page views, bounce rates, and user demographics.

To integrate Google Analytics with Docusaurus, you can use the @docusaurus/plugin-google-gtag plugin.

For more information, please refer to Docusaurus Google Analytics.

SEO Optimization

Search engine optimization (SEO) is critical for ensuring that your documentation website is easily discoverable by search engines. Docusaurus provides a variety of tools and features that can help you optimize your website for SEO.

For more information, please refer to Docusaurus SEO.

Add Sitemap to Google Search Console

A sitemap is a file that lists all the pages on our website and helps search engines like Google index our website more efficiently. By adding a sitemap to Google Search Console, we can help Google to discover and index all the pages on our website.

Docusaurus comes with a built-in plugin for generating a sitemap. You can get the sitemap by visiting the /sitemap.xml page on your website. Every language has its sitemap, for example:

For more information, please refer to Docusaurus Sitemap.

Once the sitemap is generated, we can submit it to Google Search Console.

Summary

In this article, we have shown you how to use Docusaurus to build a modern documentation website, as well as how to integrate common features such as online editing, document search, multi-language support, contributor display, and analytics. By following these steps, you can create a robust and user-friendly documentation website for your open-source project.

Also, the source code of our website is located here.

Excellent solution for React Native charting in 2023

tony chen — Mon, 13 Mar 2023 03:55:02 +0000

The most used chart library for writing chart-related requirements is echarts. The performance of echarts on the website is quite mature, and the official solution is provided for the applet side, but there is no corresponding support in RN. On the market, most of the search is still based on the essence of the webview implementation, and I prefer the RN-based program, after all, the native experience will be better than the Web.

Later found @wuba/react-native-echarts to meet the needs, so try it out, the results are not bad. For those interested in the principle of implementation, click here

Tips

If you already have an APP package, you can ignore the previous packaging process and start directly from step 4.
The full code for the trial is on GitHub at: https://github.com/iambool/TestApp

The steps to use are as follows

Step 1. Development environment setup

The process of building a local RN development environment is available on the Internet, so I won't go over it again. You can search for it on google :)

Step 2. Creating an RN project

As it was a trial, I used the expo to newly initialize an rn project called TestApp.

npx create-expo-app TestApp

Step 3. Building an app on mobile devices

Generate ios and android app packages with a command line. iOS is recommended to use the emulator (no need to match the certificate), while Android I was connected to the real machine.

yarn android
yarn ios

After generating the package, the app like the one below is already installed on the phone, which means it is successful.

Step 4. Install related dependencies

yarn add @wuba/react-native-echarts echarts
yarn add @shopify/react-native-skia
yarn add react-native-svg

Note: if you are installing in an existing project, you have to build a new package after the installation is complete, otherwise the lack of native dependencies will report an error.

Step 5. Try the Skia model

@wuba/react-native-echarts supports two rendering modes (Skia and Svg), try a simple chart with Skia first. It's divided into these small steps：

Introduce echarts, chart components and other dependencies.
Registering chart components.
Create a chart instance and set an option.
Synchronized destruction of chart instances when the page is destroyed.

The specific code is as follows:

import { useRef, useEffect } from 'react';
import { View } from 'react-native';
/**
 * 1. Import the echarts dependency, this example first tries the line chart
 */
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';

/**
 * 2. Register the required components
 * SVGRenderer: it is required to register
 * LineChart: because we want to show the line chart, we have to import LineChart
 *      - If you don't know which components to import, just look at the error report and add whatever the error says is missing
 * GridComponent: This is the prompt when the error is reported, and then I added the, ha ha
 */
echarts.use([SVGRenderer, LineChart, GridComponent]);

export default () => {
  const skiaRef = useRef(null); // Ref for saving chart instances
  useEffect(() => {
    /**
     * 3. chart option
     */
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };
    let chart;
    if (skiaRef.current) {
      /**
       * 4. Initialize the chart, specifying the lower width and height
       */
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: 400,
        height: 400,
      });
      chart.setOption(option);
    }
    /**
     * 5. To destroy the chart instance after the page is closed
     */
    return () => chart?.dispose();
  }, []);
  return (
    <View className='index'>
      <SkiaChart ref={skiaRef} />
    </View>
  );
};

After writing the code, shaking the phone and reloading the bundle package, an error was reported:

ERROR Invariant Violation: requireNativeComponent: "SkiaDomView" was not found in the UIManager.

I googled it and it says it requires a version downgrade. It should correspond to the expo version, there will be a similar prompt when installing the dependency, install the prompted version and it will be fine.

So I followed the instructions and did a version downgrade:

@shopify/react-native-skia@0.1.157
react-native-svg@13.4.0

It loaded up after rebuilding the app, which was nice. (but Android covers up the point, it seems that the screen width should be adaptive.)

iOS	Android

Step 6. Try the Svg model

Write a more complex dynamic sorting bar chart with Svg mode, and compare Svg and Skia by the way. The full code is here。

// ...Some unimportant code is omitted here

// Register the required components, such as BarChart and LegendComponent
echarts.use([SVGRenderer, BarChart, LegendComponent, GridComponent]);

export default () => {
  const skiaRef = useRef(null);
  const svgRef = useRef(null);

  useEffect(() => {
    // Skia mode
    const skiaChartData = getData(); // Generate chart bar data
    let skiaChart;
    let skiaInter;
    if (skiaRef.current) {
      skiaChart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: 300,
        height: 300,
      });
      skiaChart.setOption(getDefaultOption(skiaChartData));
      setTimeout(function () {
        run(skiaChart, skiaChartData);
      }, 0);
      skiaInter = setInterval(function () {
        run(skiaChart, skiaChartData);
      }, 3000);
    }

    // Svg mode
    const svgChartData = getData();
    let svgChart;
    let svgInter;
    if (svgRef.current) {
      svgChart = echarts.init(svgRef.current, 'light', {
        renderer: 'svg',
        width: 300,
        height: 300,
      });
      svgChart.setOption(getDefaultOption(svgChartData));
      setTimeout(function () {
        run(svgChart, svgChartData);
      }, 0);
      svgInter = setInterval(function () {
        run(svgChart, svgChartData);
      }, 3000);
    }

    return () => {
      skiaChart?.dispose();
      svgChart?.dispose();
      // The timer has to be cleaned up, otherwise it will still run after exiting the page
      clearInterval(skiaInter);
      clearInterval(svgInter);
    };
  }, []);
  return (
    <View>
      <Text>skia</Text>
      <SkiaChart ref={skiaRef} />
      <Text>svg</Text>
      <SvgChart ref={svgRef} />
    </View>
  );
};

I can't see the difference between these two modes with my eyes.

iOS	Android

Step 7. Wrapping Chart Components

So far the effect was quite good, but every time I used a bunch of things to import, It bothered me. Let's wrap it up simply:

import { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import {
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
} from 'echarts/components';
import {
  SVGRenderer,
  SvgChart as _SvgChart,
  SkiaChart as _SkiaChart,
} from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';

// Register the required components
echarts.use([
  DataZoomComponent,
  SVGRenderer,
  BarChart,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  TooltipComponent,
  TitleComponent,
  PieChart,
  LineChart,
]);

// Default width and height of the chart
const CHART_WIDTH = Dimensions.get('screen').width; // Default with the phone screen width
const CHART_HEIGHT = 300;

const Chart = ({
  option,
  onInit,
  width = CHART_WIDTH,
  height = CHART_HEIGHT,
  ChartComponent,
}) => {
  const chartRef = useRef(null);

  useEffect(() => {
    let chart;
    if (chartRef.current) {
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'svg',
        width,
        height,
      });
      option && chart.setOption(option);
      onInit?.(chart);
    }
    return () => chart?.dispose();
  }, [option]);
  return <ChartComponent ref={chartRef} />;
};

const SkiaChart = (props) => <Chart {...props} ChartComponent={_SkiaChart} />;
const SvgChart = (props) => <Chart {...props} ChartComponent={_SvgChart} />;
// Just export these two guys
export { SkiaChart, SvgChart };

Step 8. Using multiple charts

Once it’s wrapped, let’s write a page with multiple charts and see how it works. Here is a page for “e-commerce data analysis”, including a line chart, bar chart and pie chart. Below is the main code written with svg mode, click here for detailed code.

import { SkiaChart } from '../../components/Chart';
import { ScrollView, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useCallback, useEffect, useState } from 'react';
import {
  defaultActual,
  lineOption,
  salesStatus,
  salesVolume,
  userAnaly,
  getLineData,
} from './contants';
import styles from './styles';
// Turn on chart loading
const showChartLoading = (chart) =>
  chart.showLoading('default', {
    maskColor: '#305d9e',
  });
// Close chart loading
const hideChartLoading = (chart) => chart.hideLoading();

export default () => {
  const [actual, setActual] = useState(defaultActual); // Recording real-time data

  useEffect(() => {
    // Assuming a recurring request for data
    const interv = setInterval(() => {
      const newActual = [];
      for (let it of actual) {
        newActual.push({
          ...it,
          num: it.num + Math.floor((Math.random() * it.num) / 100),
        });
      }
      setActual(newActual);
    }, 200);
    return () => clearInterval(interv);
  }, [actual]);

  const onInitLineChart = useCallback((myChart) => {
    showChartLoading(myChart);
    // Simulation of data requests
    setTimeout(() => {
      myChart.setOption({
        series: getLineData,
      });
      hideChartLoading(myChart);
    }, 1000);
  }, []);

  const onInitUserChart = useCallback((myChart) => {
    // Simulate data request, similar to onInitLineChart
  }, []);
  const onInitSaleChart = useCallback((myChart) => {
    // Simulate data request, similar to onInitLineChart
  }, []);
  const onInitStatusChart = useCallback((myChart) => {
    // Simulate data request, similar to onInitLineChart
  }, []);

  const chartList = [
    ['订单走势', lineOption, onInitLineChart],
    ['用户统计', userAnaly, onInitUserChart],
    ['各品类销售统计', salesVolume, onInitSaleChart],
    ['订单状态统计', salesStatus, onInitStatusChart],
  ];

  return (
    <ScrollView style={styles.index}>
      <StatusBar style='light' />
      <View>
        <View style={styles.index_panel_header}>
          <Text style={styles.index_panel_title}>实时数据</Text>
        </View>
        <View style={styles.index_panel_content}>
          {actual.map(({ title, num, unit }) => (
            <View key={title} style={styles.sale_item}>
              <View style={styles.sale_item_cell}>
                <Text style={styles.sale_item_text}>{title}</Text>
              </View>
              <View style={[styles.sale_item_cell, styles.num]}>
                <Text style={styles.sale_item_num}>{num}</Text>
              </View>
              <View style={[styles.sale_item_cell, styles.unit]}>
                <Text style={styles.sale_item_text}>{unit}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>
      {chartList.map(([title, data, callback]) => (
        <View key={title}>
          <View style={styles.index_panel_header}>
            <Text style={styles.index_panel_title}>{title}</Text>
          </View>
          <View style={styles.index_panel_content}>
            <SkiaChart option={data} onInit={callback} />
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

Reload the bundle and see the result

iOS	Android

After rendering, the interaction on iOS is very smooth, while the interaction on Android feels occasionally laggy (not because my phone is too bad, right?...)

Try Skia mode again

Well, although it can, it seems that Chinese can not be displayed properly, Android Chinese is not displayed, and iOS is a mess of code. After reading the documentation, skia currently does not support Chinese on the Android side, We can display Chinese on iOS by setting the font to ‘PingFang SC’, for example:

const option = {
  title: {
    text: '我是中文',
    textStyle: {
      fontFamily: 'PingFang SC', // setting the font type
    },
  },
};

But every place that displays Chinese has to set the font... that or use Svg first, I'm lazy.

Summary

After using it for a while, I summarized the following:

In terms of support, @wuba/react-native-echarts supports all types of charts except GL series and map charts which are not yet supported, which is very enough for daily business. The code to implement the various charts in echarts can be found in taro-playground.
Interaction, iOS is very silky smooth, Android sometimes there are cases of frame drops.
Performance: Performance is officially reported as better than other solutions.
- I tried it, not a very large amount of data will not have any problems, but when the amount of data is too large (such as drawing a large amount of data heat map), the rendering speed significantly decreased a lot, which is a point waiting for the official to optimize.
- In addition, if there are many charts on the page, the loading speed will be slow when debugging on the real machine, so it is recommended to use the simulator first.
Chinese support, Svg mode supports Chinese, but Skia mode is not available yet.

The above is only a personal view, any questions welcome communication.

Author: iambool

Easier charting in React Native using Apache ECharts

tony chen — Thu, 12 Jan 2023 03:12:28 +0000

We have developed an open source graphics library for react native APP, which is based on Apache ECharts and uses RNSVG or RNSkia for rendering in a way that is almost identical to using it in the web, and can satisfy most graphics situations. The project source code is available at https://github.com/wuba/react-native-echarts, and our office site is https://wuba.github.io/react-native-echarts/.

Introduction

When drawing charts, the chart library we use most frequently is ECharts. As one of the most mature chart libraries on the market, mainly for web-side use, there is no best way to use it in React Native, in the face of this situation, our solutions are:

Option 1, use a chart libraries developed specifically for React Native as an alternative, such as react-native-charts-wrapper, victory-native, etc. The style and interaction of these chart libraries are different from ECahrts, and the richness of charts is not enough. Especially in the scenario of multi-platform requirements, a separate UI interaction design is needed for React Native.
Option 2, charts are rendered by react-native-webview, This solution uses injectedJavaScript for initialization and postMessage for event response, you can directly use open source libraries such as react-native-echarts-pro, native-echarts, etc. When there are multiple charts or too many chart elements on the page, it will encounter performance bottlenecks, such as white screen phenomenon for large data volume area charts and single-axis scatter charts on Android, and there will be more obvious lag and frame drop during rendering.

Therefore, we consider developing a new chart library that can integrate the capabilities of ECharts into React Native applications for better usability and stronger performance.

Since we don’t want to write a graphics library from scratch, let’s look at what graphics libraries we currently have designed for React Native:

react-native-svg: provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
react-native-skia: React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products. It also provides an ImageSVG component that supports rendering of SVG formatted images.

We know that ECharts supports SVG rendering, so if we get the SVG data before the chart is rendered and provide it to react-native-svg or react-native-skia for rendering, we will be able to achieve our goal.

After a period of experimentation, we have developed wrn-echart with the following features：

🔥 The same way as Apache ECharts
🎨 Rich charts, covering almost all usage scenarios
✨ Optional rendering library, Skia or SVG
🚀 Able to reuse code with web
📱 Support for zoom gestures

How to use

In practice, the overall process for wrn-echarts is similar to ECharts:

yarn add wrn-echarts
Choose to install react-native-svg or @shopify/react-native-skia
Introduce the relevant components from wrn-echarts
Replace the SVGRenderer of ECharts with the SVGRenderer of wrn-echarts
Write the option configuration information for the chart
Use SkiaChart / SvgChart component

Here is the sample code：

// import { SkiaChart, SVGRenderer } from 'wrn-echarts';
import SkiaChart, { SVGRenderer } from 'wrn-echarts/skiaChart';
import * as echarts from 'echarts/core';
import { useRef, useEffect } from 'react';
import { LineChart } from 'echarts/charts';

echarts.use([ SVGRenderer, LineChart ])

export default function App() {
  const skiaRef = useRef<any>(null);
  useEffect(() => {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
    let chart: any;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: 250,
        height: 300,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);

  return <SkiaChart ref={skiaRef} />;
}

Here is a screenshot of it:

Isn’t it particularly easy? More chart configurations can be viewed on the echarts website.

We support most of the charts currently supported by ECharts. I will show some of the charts below, and more examples can be seen on the taro-playground project.

Performance

As mentioned before, the mainstream solution for using ECharts in React Native is to implement it via WebView. Among the many WebView-based implementations, react-native-echarts-pro has more users, so we chose react-native-echarts-pro as a comparison.
The following are screenshots of the initialization process for the different implementations:

After quite a few test cases, we found that wrn-echarts has performance advantages in regular usage scenarios, but in scenarios with large amounts of data, there will be significant lag because of the declarative UI rendering method, which we will continue to explore to improve performance subsequently.

Implementation details

Above is the flowchart of the library, taking react-native-svg as an example, the core workflow is:

Replace the SVGRenderer of ECharts, and replace the registered SVGPainter with the custom SVGPainter.
CustomSVGPainter inherits from SVGPainter, overwrites the constructor and part of the refresh function, calls the patch function registered on SVGComponent when the chart data is initialized or updated, and passes the calculated new SVG data to it.
Define SVGComponent, which manages the current chart instance and has a core patch function on it to receive real-time SVG data and then call the SVGElement function.
SVGElement function iterates all SVG nodes and transforms them into the corresponding SVG elements provided by react-native-svg for the final rendering action.

When using react-native-skia, there are some differences. There is a core method patchString on the defined SkiaComponent component. patchString receives the changed SVG data, converts it into SVG string, and passes it to the ImageSVG component of react-native-skia for rendering.

Handling TouchEvent

ECharts events are mouse events, such as click, dblclick, mousedown, mousemove, etc. The mouse events are used to trigger the display or animation of the chart elements.
We use the PanResponder of React Native to capture the events, then simulate the mobile TouchEvent as a mouse event and dispatch it to the chart instance generated by the ECharts init method.

For example, the action of following the mouse to display the legend on the chart is TouchStart + TouchMove on the mobile side, which translates to a mouse event of mousedown + mousemove.

Another example is the zooming of the chart, the mobile side is two-finger zooming, which is translated to the mouse mousewheel event, and the corresponding mousewheel scrolling distance is calculated by the two-finger distance change.

Here is the key code:

Convert TouchEvent to MouseEvent

PanResponder.create({
  onPanResponderGrant: ({ nativeEvent }) => {
    // Action start, translated into mouse down and move events
    dispatchEvent(
      zrenderId,
      ['mousedown', 'mousemove'],
      nativeEvent,
      'start'
    );
  },
  onPanResponderMove: ({ nativeEvent }) => {
    // Handling finger movement operations
    const length = nativeEvent.touches.length;
    if (length === 1) {
      // single finger
    } else if (length === 2) {
      // Handling two-finger movement operations here
      if (!zooming) {
        // ...
      } else {
        // Here the event is converted to a scroll wheel
        const { initialX, initialY, prevDistance } = pan.current;
        const delta = distance - prevDistance;
        pan.current.prevDistance = distance;
        dispatchEvent(zrenderId, ['mousewheel'], nativeEvent, undefined, {
          zrX: initialX,
          zrY: initialY,
          zrDelta: delta / 120,
        });
      }
    }
  },
  onPanResponderRelease: ({ nativeEvent }) => {
    // The action is over, where it is transformed into a mouse click release operation
  },
})

Applying a MouseEvent to an ECharts chart instance

function dispatchEvent(
  zrenderId: number,
  types: HandlerName[],
  nativeEvent: NativeTouchEvent,
  stage: 'start' | 'end' | 'change' | undefined,
  props: any = {
    zrX: nativeEvent.locationX,
    zrY: nativeEvent.locationY,
  }
) {
  if (zrenderId) {
    var handler = getInstance(zrenderId).handler;
    types.forEach(function (type) {
      handler.dispatch(type, {
        preventDefault: noop,
        stopImmediatePropagation: noop,
        stopPropagation: noop,
        ...props,
      });
      stage && handler.processGesture(wrapTouch(nativeEvent), stage);
    });
  }
}

For more information

Go to https://github.com/wuba/react-native-echarts to view the source code, and give us a star if you like it. If you encounter any problems, you can submit an issue.

The sample code in this post is on the https://github.com/wuba/taro-playground project, which is also open source, and interested parties can also install the new version of the Taro Playground app directly from the app store or from the releases page to experience it.